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

READONLY не работает с флажками, поскольку он не позволяет вам редактировать ценить поля, но с флажком вы фактически редактируете состояние поля (on || off)

От faqs.org:

It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don't change the value of the field.

Если вы не хотите использовать 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';
}

Нет, но вы можете использовать события javascript для достижения чего-то подобного.

I just don't want the client to be able to change them under certain circumstances.

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

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

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

<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"/>

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

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

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

Однако мой подход заключался бы в использовании отключенного (пользователь ожидает, что отключенный флажок будет недоступен для редактирования, вместо того, чтобы использовать 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" onclick = "this.checked=!this.checked;">

Но вы ОБЯЗАТЕЛЬНО ДОЛЖНЫ проверить данные на сервере, чтобы убедиться, что они не были изменены.

При отправке флажка HTML на сервер он имеет строковое значение 'on' или ''.

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

Вот функция для этого. Он использует строку «T» или «F», и вы можете изменить это как хотите. Это использовалось на странице ASP с использованием сценария VB на стороне сервера.

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
        "value='" & i_strChecked_TorF & "'>" & _
    "<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
        strThisCheckedValue & ">"   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

Вверху страницы ASP вы можете выбрать сохраненное значение ...

strDataValue = GetCheckbox(Request.Form("chkTest"))

и когда вы хотите вывести свой флажок, вы можете сделать это ...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

Я протестировал это, и он отлично работает. Он также не полагается на JavaScript.

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

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

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

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

Мне кажется проще использовать какой-нибудь javascript при отправке формы, чтобы отключить флажки, чем использовать скрытый ввод для переноса значения.

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

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

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

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

с jquery:

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

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

onclick = "javascript: return false;"

Самый простой (на мой взгляд):

onclick = "javascript:{this.checked = this.defaultChecked;}"

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

OK disabled сделает это - к сожалению, отключенные элементы управления не доступны с клавиатуры и, следовательно, не соответствуют всем законам о доступности. Это САМЫЙ БОЛЬШОЙ провал в HTML, о котором я знаю.

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

В старом HTML вы можете использовать

<input type = "checkbox" disabled checked>text

но на самом деле не рекомендуется использовать просто старый HTML, теперь вы должны использовать XHTML.

В правильно сформированном XHTML вы должны использовать

<input type = "checkbox" disabled = "disabled" checked = "checked" />text <!-- if yu have a checked box-->
<input type = "checkbox" disabled = "disabled" />text <!-- if you have a unchecked box -->

правильно сформированный XHTML требует формы XML, поэтому следует использовать disabled = "disabled" вместо того, чтобы просто использовать disabled.

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

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

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

При отправке формы мы фактически передаем значение флажка, а не состояние (отмечено / не отмечено). Атрибут Readonly не позволяет нам редактировать значение, но не состояние. Если вы хотите иметь поле только для чтения, которое будет представлять значение, которое вы хотите отправить, используйте текст только для чтения.

Попробуйте сделать этот флажок доступным только для чтения и при этом запретить пользователю проверять. Это позволит вам POST значение флажка. Для этого вам необходимо выбрать состояние флажка по умолчанию как «Проверено».

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

Если вам нужна вышеуказанная функциональность + вы не хотите получать данные флажка, попробуйте следующее:

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

Надеюсь, это поможет.

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

Следующее работает, если вы знаете, что флажок всегда установлен:

<input type = "checkbox" name = "Name" checked onchange='this.checked = true;'>

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

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

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

Простое отключение отключает все операторы JQuery / 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/

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

<!-- 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

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

Если кто-то еще использует MVC и шаблон редактора, я контролирую отображение свойства только для чтения (я использую настраиваемый атрибут для получения значения в операторе if)

@if (true)
{
    @Html.HiddenFor(m => m)
    @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))
} 
else
{               
    @Html.CheckBoxFor(m => m)
}

Или просто:

$('your selector').click(function(evt){evt.preventDefault()});

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

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

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

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

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

Почему бы не закрыть ввод сверху пустым div?

<div id='checkbox_wrap'>
   <div class='click_block'></div>
   <input type='checkbox' /> 
</div>

тогда что-то вроде этого с помощью CSS

 #checkbox_wrap{
   height:10px;
   width:10px;
   }
 .click_block{
   height: 10px;
   width: 10px;
   position: absolute;
   z-index: 100;
}

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

Я бы прокомментировал ответ 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" ' : '', '/>';

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

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

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

Он будет выглядеть и вести себя так, как будто это значение, доступное только для чтения. И он обрабатывает (игнорирует) сообщения злонамеренных пользователей. Вы убиваете двух зайцев одним выстрелом.

Последний jQuery имеет эту функцию

$("#txtname").prop('readonly', false);

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

Но вы можете сделать их только для чтения с помощью 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.

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

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

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

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

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

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

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        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>

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

<input type = "checkbox" readonly>

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

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

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

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

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

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

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

Следует отметить, что:

1. OP предпочел не использовать атрибут 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. Подключите постоянно популярные события change или submit, которые не всегда срабатывают, если их зацепило что-то еще.
4. Требовать скрытый ввод или другие специальные элементы / атрибуты, которые необходимо отменить, чтобы снова включить флажок с помощью javascript.

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

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

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

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

@ (Model.IsEnabled) Используйте это условие для динамической проверки и снятия флажка и установки только для чтения, если флажок уже установлен.

 <input id = "abc" name = "abc"  type = "checkbox" @(Model.IsEnabled ? "checked=checked onclick=this.checked=!this.checked;" : string.Empty) >