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

Question

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

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

Answer 1

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

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

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

Answer 2

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';
}

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

отключен = "отключен" / отключен = true

Answer 6

Это немного затрудняет юзабилити.

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

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

Answer 7

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

с JQuery:

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

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

Answer 8

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

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

Answer 9

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

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

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

Answer 10

onclick="javascript: return false;"