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

Question

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

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

Answer 1

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

Answer 2

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

<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();
    });

});

1007 *

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

Answer 3

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

Answer 4

Опираясь на приведенные выше ответы, при использовании 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>

Answer 5

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

Answer 6

Если вы хотите, чтобы они были отправлены на сервер с формой, но не были интерактивными для пользователя, вы можете использовать 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>

Answer 7

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

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

Предположим, две логические переменные: $ selected и $ 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.

Answer 8

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

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

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

Answer 9

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

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

Answer 10

альтернативная идея - использовать оверлей и скрыть только для чтения входы

http://pure -essence.net / 2011/09/22 / JQuery-только для чтения-элементы /