选中复选框时可以编辑 HTML“只读”输入值答案

【问题标题】：HTML "readonly" input value can be edit when checked a check box选中复选框时可以编辑 HTML“只读”输入值
【发布时间】：2019-06-18 08:20:17
【问题描述】：

我有一个输入<input type="text" value="1" readonly id='aaa'/>。

我想给它一个功能，当用户选中该框然后可以编辑id=aaa的值。

示例：

<input type="text" value="1" readonly/> <input type="checkbox" /> Checked this if you want to edit the value.

谢谢。

【问题讨论】：

为复选框提供适当的 ID 并使用以下代码： if($("#CheckboxId").is(":checked")) { $("#aaa").removeAttr("readonly "); }else{ $("#aaa").attr("readonly","readonly"); }

标签： html checkbox input

【解决方案1】：

向复选框添加一个 onchange 事件，该事件更改为其前一个兄弟（文本字段）的 readOnly 属性

<input type="text" value="1" readonly id="aaa" />
<input type="checkbox" onchange="getElementById('aaa').readOnly = !this.checked" />
Checked this if you want to edit the value.

【讨论】：

+1 b/c，正如你所拥有的，readOnly 应该链接到 this.checked，给定标签文本（而不是仅仅切换 readOnly 状态），我已经纳入我的答案。

【解决方案2】：

您想使用 JavaScript 更改 readOnly 属性。将其设置为复选框是否被选中的反面。

document.getElementById('checksome').addEventListener('click', function() {

  var changeThis = document.getElementById('readsome');

  changeThis.readOnly = !this.checked;
});

<input id="readsome" type="text" value="1" readonly>
<label><input id="checksome" type="checkbox"> Click this to edit</label>

【讨论】：

您选择click 事件而不是change 事件有什么原因吗？我使用键盘切换了复选框，令我惊讶的是，这也触发了 Chrome 中的click 事件。
@dehart 在 FF 中也是如此。（现在每个人都这样！）不是真的；只是因为OP说点击，我知道点击是一致的，所以我也做了同样的事情。（对 change 事件的一些问题的模糊记忆，但不知道来自哪里/何时。）