Можно ли установить флажки HTML только для чтения?

Я думал, что они могли бы быть, но поскольку я не кладу свои деньги туда, где мой рот (так сказать) устанавливает атрибут readonly, на самом деле, похоже, ничего не делает.

Я бы предпочел не использовать Отключено, поскольку я хочу, чтобы отмеченные флажки отправлялись вместе с остальной частью формы, я просто не хочу, чтобы клиент мог изменять их при определенных обстоятельствах.

Вы можете использовать это:

<input type="checkbox" onclick="return false;"/>

Это работает, потому что возврат false из события click останавливает продолжение цепочки выполнения.

READONLYне работает на флажках , как это мешает вам редактирование поля в значении , но с помощью флажка вы на самом деле редактирование поля в состоянии (на || выкла)

От faqs.org :

Важно понимать, что READONLY просто запрещает пользователю изменять значение поля, а не взаимодействовать с ним. Например, в флажках вы можете включить или отключить их (таким образом, установив состояние CHECKED), но вы не меняете значение поля.

Если вы не хотите использовать, disabledно все еще хотите отправить значение, как насчет отправки значения в виде скрытого поля и простой печати его содержимого пользователю, когда они не соответствуют критериям редактирования? например

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

Это флажок, который вы не можете изменить:

<input type="checkbox" disabled="disabled" checked="checked">

Просто добавьте disabled="disabled"в качестве атрибута.

Изменить, чтобы обратиться к комментариям:

Если вы хотите, чтобы данные были отправлены обратно, простое решение - применить одно и то же имя к скрытому вводу:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

Таким образом, когда флажок установлен на «отключен», он служит только для визуального представления данных, а не на самом деле «связан» с данными. В обратной записи значение скрытого ввода отправляется, когда флажок снят.

<input type="checkbox" onclick="this.checked=!this.checked;">

Но вы абсолютно ДОЛЖНЫ проверить данные на сервере, чтобы убедиться, что они не были изменены.

другое «простое решение»:

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled = "disabled" / disabled = true

Это представляет некоторую проблему юзабилити.

Если вы хотите отобразить флажок, но не позволить ему взаимодействовать, тогда зачем тогда даже флажок?

Однако мой подход заключается в том, чтобы использовать отключенный (пользователь ожидает, что отключенный флажок будет недоступен для редактирования, вместо использования JS, чтобы сделать включенный флажок неработающим), и добавьте обработчик отправки формы, используя javascript, который включает флажки прямо перед тем, как форма будет Отправлено. Таким образом, вы публикуете свои значения.

т.е. как то так:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}

<input type="checkbox" readonly="readonly" name="..." />

с помощью jquery:

$(':checkbox[readonly]').click(function(){
            return false;
        });

все еще может быть хорошей идеей дать некоторый визуальный намек (css, text, ...), что элемент управления не будет принимать входные данные.

Я использовал это для достижения результатов:

<input type=checkbox onclick="return false;" onkeydown="return false;" />

Я случайно заметил решение, данное ниже. Нашел это мое исследование по той же проблеме. Не знаю, кто это опубликовал, но я не сделал это. Он использует jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

Это сделало бы флажки только для чтения, что было бы полезно для показа данных только для чтения клиенту.

onclick="javascript: return false;"

Запоздалый ответ, но большинство ответов, кажется, слишком усложняют его.

Насколько я понимаю, ОП в основном хотел:

1. Флажок только для чтения, чтобы показать статус.
2. Значение возвращается с формой.

Необходимо отметить, что:

1. ФП предпочел не использовать disabled атрибут, потому что они «хотят, чтобы отмеченные флажки были отправлены вместе с остальной частью формы».
2. Не отмеченные флажки не отправляются вместе с формой, так как цитата из OP в 1. выше указывает, что они уже знали. По сути, значение флажка существует, только если оно отмечено.
3. Отключенный флажок однозначно указывает на то, что он не может быть изменен по своему замыслу, поэтому пользователь вряд ли попытается изменить его.
4. Значение флажка не ограничивается указанием его статуса, например yesили false, но может быть любым текстом.

Следовательно, поскольку readonlyатрибут не работает, лучшее решение, не требующее JavaScript, это:

1. Отключенный флажок, без имени или значения.
2. Если флажок должен отображаться как отмеченный, скрытое поле с именем и значением хранится на сервере.

Итак, для установленного флажка:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

Для непроверенного флажка:

<input type="checkbox" disabled="disabled" />

Основная проблема с отключенными входами, особенно флажками, заключается в их плохой контрастности, что может быть проблемой для некоторых людей с определенными нарушениями зрения. Может быть лучше указать значение простыми словами, такими как Status: noneили Status: implemented, но включая скрытый ввод выше, когда последний используется, такой как:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Большинство текущих ответов имеют одну или несколько из следующих проблем:

1. Проверьте только мышь, а не клавиатуру.
2. Проверяйте только при загрузке страницы.
3. Подцепите все популярные изменения или отправьте события, которые не всегда сработают, если их подключит что-то другое.
4. Требуется скрытый ввод или другие специальные элементы / атрибуты, которые необходимо отменить, чтобы снова включить флажок с помощью JavaScript.

Следующее просто и не имеет ни одной из этих проблем.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

Если флажок доступен только для чтения, он не изменится. Если это не так, это будет. Он использует jquery, но вы, вероятно, уже используете это ...

Оно работает.

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

Если вы хотите, чтобы они были отправлены на сервер с формой, но не были интерактивными для пользователя, вы можете использовать pointer-events: noneв css ( работает во всех современных браузерах, кроме IE10 и Opera 12 ) и установить tab-index,  -1чтобы предотвратить изменение с клавиатуры. Также обратите внимание, что вы не можете использовать labelтег, так как нажатие на него все равно изменит состояние.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}

<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

<input type="checkbox" onclick="return false" /> будет работать на вас, я использую это

Некоторые ответы здесь кажутся немного окольными, но вот небольшой взлом.

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

тогда в jquery вы можете выбрать один из двух вариантов:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

​

демо: http://jsfiddle.net/5WFYt/

Опираясь на приведенные выше ответы, при использовании jQuery это может быть хорошим решением для всех входных данных:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

Я использую это с Asp.Net MVC, чтобы установить некоторые элементы формы только для чтения. Вышеприведенное работает для текста и флажков, устанавливая любой родительский контейнер как .readonly, например, в следующих сценариях:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

Я знаю, что «отключен» не является приемлемым ответом, так как ОП хочет его опубликовать. Однако вам всегда придется проверять значения на стороне сервера ДАЖЕ, если у вас установлена ​​опция только для чтения. Это потому, что вы не можете запретить злоумышленнику публиковать значения с помощью атрибута readonly.

Я предлагаю сохранить исходное значение (на стороне сервера) и отключить его. Затем, когда они отправляют форму, игнорируют любые опубликованные значения и принимают исходные значения, которые вы сохранили.

Это будет выглядеть и вести себя так, как будто это значение только для чтения. И он обрабатывает (игнорирует) сообщения от злоумышленников. Ты убиваешь 2 зайцев одним выстрелом.

Я бы прокомментировал ответ ConroyP, но это требует 50 репутации, которой у меня нет. У меня достаточно репутации, чтобы опубликовать другой ответ. Сожалею.

Проблема с ответом ConroyP заключается в том, что этот флажок становится неизменным, даже не включая его на странице. Хотя Electrons_Ahoy не оговаривает так много, лучшим ответом будет тот, в котором неизменяемый флажок будет выглядеть аналогично, если не совпадает с изменяемым флажком, как в случае, когда применяется атрибут «отключен». Решение, которое учитывает две причины, которые Electrons_Ahoy указывает на нежелание использовать атрибут «disabled», не будет обязательно будет недействительным, поскольку в нем используется атрибут «disabled».

Предположим, две логические переменные, $ checked и $ disabled:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

Флажок отображается как флажок, если $ флажок равен true. Флажок отображается как непроверенный, если $ флажок равен false. Пользователь может изменить состояние флажка, если и только если $ disabled имеет значение false. Параметр «my_name» не публикуется, когда флажок снят, пользователем или нет. Параметр «my_name = 1» публикуется, когда флажок установлен, пользователем или нет. Я верю, что это то, что искал Electrons_Ahoy.

Нет, входные флажки не могут быть прочитаны только.

Но вы можете сделать их только для чтения с JavaScript!

Добавьте этот код в любое время и в любом месте, чтобы сделать флажки доступными только для чтения, как предполагается, и запретите пользователю изменять его каким-либо образом.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});

input[type=checkbox][readonly] {
    cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Вы можете добавить этот скрипт в любое время после загрузки jQuery.

Это будет работать для динамически добавленных элементов.

Он работает, собирая событие click (которое происходит до события change) для любого элемента на странице, затем проверяет, является ли этот элемент флажком «только для чтения», и, если это так, блокирует изменение.

Есть так много вариантов, чтобы не влиять на производительность страницы.

Просто используйте простой отключенный тег, как показано ниже.

<input type="checkbox" name="email"  disabled>

альтернативная идея состоит в том, чтобы использовать наложение и скрыть ваши входные данные только для чтения

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

Если вы хотите, чтобы ВСЕ ваши флажки были «заблокированы», чтобы пользователь не мог изменить состояние «проверено», если присутствует атрибут «только для чтения», тогда вы можете использовать jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Крутая вещь в этом коде состоит в том, что он позволяет вам изменять атрибут «только для чтения» по всему коду без необходимости повторной привязки каждого флажка.

Это работает и для радио кнопок.

Основная причина, по которой люди хотели бы установить флажок «только для чтения» и (также) радиогруппу «только для чтения», заключается в том, что информация, которую нельзя изменить, может быть представлена ​​пользователю в том виде, в котором она была введена.

OK disabled сделает это - к сожалению, отключенные элементы управления не ориентированы на клавиатуру и, следовательно, нарушают все законы о доступности. Это самое большое зависание в HTML, которое я знаю.

Содействовать очень, очень поздно ... но все равно. При загрузке страницы используйте jquery, чтобы отключить все флажки, кроме выбранного в данный момент. Затем установите текущий выбранный как только для чтения, чтобы он выглядел так же, как отключенные. Пользователь не может изменить значение, и выбранное значение по-прежнему отправляется.

Очень поздно для вечеринки, но я нашел ответ для MVC (5). Я отключил CheckBox и добавил флажок HiddenFor ДО, поэтому, когда он публикуется, сначала находит поле Hidden и использует это значение. Это работает.

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>

Я бы использовал атрибут readonly

<input type="checkbox" readonly>

Затем используйте CSS, чтобы отключить взаимодействие:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Обратите внимание, что использование псевдокласса: только для чтения здесь не работает.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

Я просто не хочу, чтобы клиент мог изменить их при определенных обстоятельствах.

READONLY сам по себе не сработает. Вы можете сделать что-нибудь интересное с CSS, но мы обычно просто отключаем их.

ВНИМАНИЕ: Если они отправлены обратно, клиент может изменить их, точка. Вы не можете полагаться только на чтение, чтобы пользователь не мог что-то изменить. Они всегда могут использовать fiddler или просто изменить html с firebug или что-то подобное.

Мое решение на самом деле противоположно решению FlySwat, но я не уверен, будет ли оно работать в вашей ситуации. У меня есть группа флажков, и у каждого есть обработчик onClick, который отправляет форму (они используются для изменения настроек фильтра для таблицы). Я не хочу разрешать множественные клики, поскольку последующие клики после первого игнорируются. Поэтому я отключаю все флажки после первого клика и после отправки формы:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Чекбоксы находятся в элементе span с идентификатором «filters» - вторая часть кода представляет собой оператор jQuery, который перебирает чекбоксы и отключает каждый из них. Таким образом, значения флажков по-прежнему отправляются через форму (поскольку форма была отправлена ​​до их отключения), и это не позволяет пользователю изменять их до перезагрузки страницы.