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

html HTML

Me无敌

2020-03-16

我以为可以,但是由于我没有把钱花在嘴上(可以这么说),设置readonly属性实际上似乎没有任何作用。

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

第1835篇《HTML复选框可以设置为只读吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
Sam前端 2020.03.16

Contributing very very late...but anyway. On page load, use jquery to disable all checkboxes except the currently selected one. Then set the currently selected one as read only so it has a similar look as the disabled ones. User cannot change the value, and the selected value still submits.

阳光Tony 2020.03.16

Very late to the party but I found an answer for MVC (5) I disabled the CheckBox and added a HiddenFor BEFORE the checkbox, so when it is posting if finds the Hidden field first and uses that value. This does work.

 <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>
神奇猴子米亚 2020.03.16

an alternative idea is to use an overlay and cover up your readonly inputs

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

Eva理查德阳光 2020.03.16

The main reason people would like a read-only check-box and (as well) a read-only radio-group is so that information that cannot be changed can be presented back to the user in the form it was entered.

OK disabled will do this -- unfortunately disabled controls are not keyboard navigable and therefore fall foul of all accessibility legislation. This is the BIGGEST hangup in HTML that I know of.

老丝小胖蛋蛋 2020.03.16

Just use simple disabled tag like this below.

<input type="checkbox" name="email"  disabled>
番长斯丁 2020.03.16
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
梅卡卡西 2020.03.16

<input type="checkbox" onclick="return false" /> will work for you , I am using this

阳光米亚 2020.03.16
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
A老丝 2020.03.16

我用它来达到结果:

<input type=checkbox onclick="return false;" onkeydown="return false;" />
西门Mandy 2020.03.16
onclick="javascript: return false;"
JinJin理查德 2020.03.16

这是一个您无法更改的复选框:

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

这样,当复选框设置为“禁用”时,它仅用于可视化表示数据,而不是实际“链接”到数据。在回发中,当禁用复选框时,将发送隐藏输入的值。

十三逆天 2020.03.16

另一个“简单解决方案”:

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

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

但是,您绝对必须验证服务器上的数据,以确保它没有被更改。

StafanJim 2020.03.16

您可以使用此:

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

之所以可行,是因为click事件返回false会停止执行链。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android