Я думал, что они могут быть, но поскольку я не вкладываю свои деньги туда, где мой рот (так сказать), устанавливающий атрибут readonly, на самом деле ничего не делает.
Я бы предпочел не использовать Disabled, так как я хочу, чтобы отмеченные флажки были отправлены вместе с остальной формой, я просто не хочу, чтобы клиент мог изменить их при определенных обстоятельствах.
вы можете использовать это:
<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;"
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
<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();
});
});
Основываясь на приведенных выше ответах, при использовании 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" >
Я знаю, что "disabled" не является приемлемым ответом, так как op хочет, чтобы он публиковал. Тем не менее, вам всегда нужно проверять значения на стороне сервера EVEN, если у вас установлен параметр readonly. Это связано с тем, что вы не можете запретить злоумышленнику публиковать значения, используя атрибут readonly.
Я предлагаю сохранить исходное значение (на стороне сервера) и отключить его. Затем, когда они отправляют форму, игнорируют любые опубликованные значения и берут исходные значения, которые вы сохранили.
Он будет выглядеть и вести себя как значение для чтения. И он обрабатывает (игнорирует) сообщения от злонамеренных пользователей. Вы убиваете двух птиц одним камнем.
Если вы хотите, чтобы они были отправлены на сервер с формой, но не были интерактивными для пользователя, вы можете использовать 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>Я бы прокомментировал ответ ConroyP, но для этого требуется 50 репутации, которых у меня нет. У меня достаточно репутации, чтобы опубликовать другой ответ. К сожалению.
Проблема с ответом ConroyP заключается в том, что этот флажок отображается неизменным, даже не включая его на странице. Хотя Electrons_Ahoy не предусматривает столько же, лучшим ответом будет тот, в котором неизменяемый флажок будет выглядеть схожим, если не таким же, как сменный флажок, как в случае, когда применяется атрибут "disabled" . Решение, которое устраняет две причины, по которым 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 - true. Флажок отображается как непроверенный, если $checked - false. Пользователь может изменить состояние флажка, если и только если $disabled является ложным. Параметр "my_name" не отправляется, если флажок не установлен, пользователем или нет. Параметр "my_name = 1" публикуется, когда флажок установлен, пользователем или нет. Я считаю, что это то, чего искал Electrons_Ahoy.
Просто используйте простой отключенный тег, как показано ниже.
<input type="checkbox" name="email" disabled>
Запоздалый ответ, но большинство ответов, кажется, слишком усложняют его.
Насколько я понимаю, ОП в основном хотел:
Следует отметить, что:
disabled, потому что они "хотят, чтобы отмеченные флажки были отправлены с остальной частью формы".yes или false, но может быть любым текстом.Поэтому, поскольку атрибут readonly не работает, лучшее решение, не требующее JavaScript, это:
Так что для проверенного флажка:
<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />Альтернативная идея - использовать наложение и скрыть ваши исходные входы
http://pure-essence.net/2011/09/22/jquery-read-only-elements/
Нет, входные флажки не могут быть прочитаны только.
Но вы можете сделать их только для чтения с 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:
$(':checkbox').click(function () {
if (typeof ($(this).attr('readonly')) != "undefined") {
return false;
}
});
Крутая вещь в этом коде состоит в том, что он позволяет вам изменять атрибут "только для чтения" по всему коду без необходимости повторной привязки каждого флажка.
Это работает и для радио кнопок.
Основная причина, по которой люди хотели бы установить флажок только для чтения и (также) радиогруппу только для чтения, чтобы информация, которая не может быть изменена, может быть возвращена пользователю в том виде, в котором она была введена.
Отключено OK отключено. К сожалению, отключенные элементы управления не являются клавиатурой и, следовательно, не соответствуют всем законам о доступности. Это БОЛЬШОЕ зависание в HTML, о котором я знаю.
Внесение очень очень поздно... но в любом случае. При загрузке страницы используйте jquery, чтобы отключить все флажки, кроме выбранного в данный момент. Затем установите текущий выбранный как прочитанный, чтобы он выглядел аналогично тому, как отключенные. Пользователь не может изменить значение, и выбранное значение все равно отправляется.
Очень поздно вечеринке, но я нашел ответ для MVC (5) Я отключил CheckBox и добавил флажок HiddenFor BEFORE, поэтому, когда он публикует, сначала находит Скрытое поле и использует это значение. Это работает.
<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 сам не будет работать. Вы можете сделать что-то фанки с CSS, но мы обычно просто делаем их отключенными.
ПРЕДУПРЕЖДЕНИЕ. Если они отправлены обратно, клиент может изменить их, период. Вы не можете полагаться только на чтение, чтобы пользователь не мог что-то менять. Всегда можно использовать скрипач или просто chane html w/firebug или что-то подобное.
При отправке HTML-кода на сервер он имеет строковое значение 'on' или ''.
Readonly не останавливает пользователя, редактирующего этот флажок, и отключает остановку возвращаемого значения.
Один из способов заключается в том, чтобы иметь скрытый элемент для хранения фактического значения, а отображаемый флажок - это фиктивный элемент, который отключен. Таким образом, состояние флажка сохраняется между сообщениями.
Вот функция для этого. Он использует строку "T" или "F", и вы можете изменить ее так, как вам нравится. Это использовалось на странице ASP с использованием серверной части VB script.
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.
Если вам нужно, чтобы флажок был отправлен с формой, но эффективно доступен только для чтения, я рекомендую отключить их и использовать javascript для повторного включения их при отправке формы.
Это по двум причинам. Во-первых, самое главное, ваши пользователи могут видеть видимую разницу между флажками, которые они могут изменить, и флажками, которые доступны только для чтения. Отключено делает это.
Вторая причина заключается в том, что отключенное состояние встроено в браузер, поэтому вам нужно меньше кода для выполнения, когда пользователь нажимает на что-то. Вероятно, это скорее личное предпочтение, чем что-либо другое. Вам все равно потребуется некоторый javascript, чтобы отключить их при отправке формы.
Мне кажется, что мне проще использовать некоторый javascript, когда форма отправляется, чтобы отключить флажки, чем использовать скрытый ввод для переноса значения.
Мое решение на самом деле противоположно решению FlySwat, но я не уверен, что он будет работать для вашей ситуации. У меня есть группа флажков, и у каждого есть обработчик onClick, который отправляет форму (они используются для изменения настроек фильтра для таблицы). Я не хочу разрешать несколько кликов, так как последующие клики после первого игнорируются. Поэтому я отключу все флажки после первого щелчка и после отправки формы:
onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"
Флажки находятся в элементе span с идентификатором "фильтры" - вторая часть кода представляет собой оператор jQuery, который выполняет итерации с помощью флажков и отключает их. Таким образом, значения флажка по-прежнему передаются через форму (поскольку форма была отправлена до их отключения), и это мешает пользователю изменять их до перезагрузки страницы.