Как я могу сделать checkbox readonly? не отключен?

У меня есть форма, где мне нужно отправлять значения формы в мой класс действий. В этой форме у меня есть флажок, который должен быть только для чтения. Я попытался установить disabled="true", но это не работает при отправке в класс действия.

Итак, пожалуйста, совет:

Ответы

Ответ 1

Вы можете легко сделать это css. HTML:

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" readonly />
    <br/>
    <input name="chkBox_2" type="checkbox" value="1" readonly />
    <br/>
    <input id="submitBttn" type="button" value="Submit">
</form>

CSS:

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

Демо

Ответ 2

Нет свойства, чтобы сделать checkbox readonly. Но вы можете попробовать этот трюк.

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

DEMO

Ответ 3

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

http://jsfiddle.net/2srjc/

Если вас беспокоит порядок табуляции, возвращайте false только для события keydown при нажатии клавиши табуляции:

<input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/>

http://jsfiddle.net/2srjc/149/

Ответ 4

Мне лично нравится делать это следующим образом:

<input type="checkbox" name="option" value="1" disabled="disabled" />
<input type="hidden" name="option" value="1">

Я думаю, что это лучше по двум причинам:

  • Пользователь четко понимает, что он не может редактировать это значение
  • Значение отправляется при отправке формы.

Ответ 5

Вы можете просто добавить onclick="return false" - это остановит браузер, выполнив действие по умолчанию (флажок установлен/не отмечен, не будет изменен)

Ответ 6

Я использую JQuery, поэтому я могу использовать атрибут readonly на флажках.

//This will make all read-only check boxes truly read-only
$('input[type="checkbox"][readonly]').on("click.readonly", function(event){event.preventDefault();}).css("opacity", "0.5");

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

$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")

Ответ 7

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

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

Примечание: если вы поместите имя и значение в этот флажок, оно будет в любом случае перезаписано входом с тем же именем

Ответ 8

Через CSS:

<label for="">
  <input type="checkbox" style="pointer-events: none; tabindex: -1;" checked> Label
</label>

события-указатели, не поддерживаемые в IE < 10

https://jsfiddle.net/fl4sh/3r0v8pug/2/

Ответ 9

document.getElementById("your checkbox id").disabled=true;