HTML复选框可以设置为只读吗?

我认为他们可以,但是因为我不把钱放在我的嘴巴(可以这么说)设置只读属性实际上并没有做任何事情。

我宁愿不使用Disabled,因为我希望复选框与表单的其余部分一起提交,我只是不希望客户在某些情况下能够更改它们。

你可以使用这个:

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

这是有效的,因为从click事件返回false会使执行链继续下去。

READONLY不能在复选框上工作,因为它可以防止你编辑一个字段的 ,但是用一个复选框,你实际上正在编辑字段的状态 (在|| off上)

来自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,…)仍然是一个好主意,控件将不会接受输入。

我碰巧注意到下面给出的解决方案。 在找到它我的研究相同的问题。 我不是谁贴的,但它不是由我做的。 它使用jQuery:

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

这将使复选框只读,这将有助于向客户端显示只读数据。

我用这个来达到结果:

 <input type=checkbox onclick="return false;" onkeydown="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(); }); }); 

演示: http : //jsfiddle.net/5WFYt/

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

onclick =“javascript:return false;”

基于以上的答案,如果使用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" > 

我会评论ConroyP的答案,但是这需要50个我没有的声望。 我有足够的声誉发表另一个答案。 抱歉。

ConroyP答案的问题是,复选框由于不包括在页面上而不能改变。 尽管Electrons_Ahoy没有规定太多,但最好的答案是不可变的复选框看上去与可变的复选框相似,就像应用“disabled”属性的情况一样。 Electrons_Ahoy给出的不想使用“disabled”属性的两个原因的解决方案不一定是无效的,因为它使用了“disabled”属性。

假设两个布尔变量$ check和$ 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正在寻找的东西。

我知道,“禁用”不是一个可以接受的答案,因为该操作要它发布。 但是,如果您设置了只读选项,您将始终需要验证服务器端的值。 这是因为您无法阻止恶意用户使用readonly属性发布值。

我建议存储原始值(服务器端),并将其设置为禁用。 然后,当他们提交表单时,忽略任何发布的值,并采取您存储的原始值。

它会看起来像一个只读的价值。 它处理(忽略)来自恶意用户的帖子。 你一石二鸟

一个替代的想法是使用覆盖,并掩盖您的只读输入

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

人们想要一个只读的复选框和一个只读的广播组的主要原因是,不能改变的信息可以以输入的形式呈现给用户。

确定禁用将做到这一点 – 不幸的是禁用控制键盘不通航,因此陷入所有无障碍立法犯规。 这是我知道的HTML中最大的挂断。

贡献很晚……但无论如何。 在页面加载,使用jquery禁用除当前选中的所有复选框。 然后将当前选中的一个设置为只读,以便与禁用的外观类似。 用户不能更改值,所选值仍然提交。

我只是不希望客户在某些情况下能够改变他们。

READONLY本身不起作用。 你可能会做一些有趣的CSS / CSS,但我们通常只是把它们禁用。

警告:如果他们被张贴回来,客户端可以改变他们,期限。 你不能依赖只读来防止用户改变某些东西。 总是可以使用提琴手或只是提供HTML W /萤火虫或一些这样的事情。

我的解决方案实际上与FlySwat的解决方案相反,但我不确定它是否适合您的情况。 我有一组复选框,每个都有一个提交表单的onClick处理程序(它们用于更改表格的过滤器设置)。 我不想允许多次点击,因为后面的点击会被忽略。 所以我在第一次点击之后禁用了所有的复选框,提交表单之后:

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

复选框位于一个ID为“过滤器”的span元素中 – 代码的第二部分是一个jQuery语句,它遍历复选框并禁用每个复选框。 这样,复选框值仍然通过表单提交(因为在禁用表单之前提交了表单),并且在用户重新加载页面之前阻止用户更改它们。

将HTML复选框发布到服务器时,它的字符串值为“on”或“'。

只读不会停止用户编辑复选框,并禁用停止发回的值。
解决这个问题的方法之一是有一个隐藏的元素来存储实际值,显示的复选框是一个被禁用的虚拟元素。 这种方式复选框状态是坚持之间的职位。

这是一个功能来做到这一点。 它使用一串'T'或'F',你可以改变你喜欢的任何方式。 这已经被用在使用服务器端VB脚本的ASP页面中。

 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似乎比使用隐藏的输入来执行该值更容易。

如果其他人使用MVC和编辑器模板,这是我如何控制显示只读属性(我使用自定义属性来获取if语句中的值)

 @if (true) { @Html.HiddenFor(m => m) @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No")) } else { @Html.CheckBoxFor(m => m) } 
 <input name="testName" type="checkbox" disabled> 

晚了很晚,但我找到了MVC的答案(5)我禁用了复选框,并添加了一个隐藏的复选框,所以当它发布时,如果首先找到隐藏的字段,并使用该值。 这确实有用。

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

在旧的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的原因。

要不就:

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