Question

我知道在复选框中添加readonly属性不会使其只读。另外，添加disable属性不会发布值。

在此SO post上，建议使用不同的选项以使复选框只读。

但是，我想在某些按钮点击时切换复选框的只读状态，并在表单提交上发布值。

所以我建议我在点击事件中添加“return false”。工作良好。但是，我如何切换这种行为？

<button type="button" id="btn">Toggle</button>
<input type="checkbox" value="false" onClick="return false;" name="CheckBox1" />


$(document).ready(function() {

   $("#btn").click(function()
   {
      //how do i toggle readonly here
   })

});

Answer 1

一种方法是在复选框上切换一个类名，然后在用户尝试更改复选框状态时测试该类名的存在。

（您可以使用数据属性，但这种方式还有一个额外的好处，就是让您为用户提供输入只读的视觉提示。）

＆＃13;

$("#btn").on("click", function() {
  $('input[name="CheckBox1"]').toggleClass("readonly");
});

$('input[name="CheckBox1"]').on("click", function() {
  if ($(this).hasClass('readonly')) {return false}
});

＆＃13;

.readonly {
  opacity: 0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btn">Toggle</button>
<input type="checkbox" value="false" name="CheckBox1" />

＆＃13;

如何在javascript中切换readonly状态的复选框

1 个答案: