Question

我有一组具有相同类名的复选框，我想在单击时禁用其余复选框，并保持单击状态。我在这里尝试过解决方案：disable other checkboxes when one with similar class is clicked

但是，该解决方案对我不起作用，我也不知道为什么。

HTML

<label><input type="checkbox" name="js-frameworks" class="group"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="express" class="group"> Express Workshop — Tuesday 9am-12pm, $100</label>

脚本

$(".group").change(() => {
  console.log("hitting the check box");
  this.checked ? $("." + this.className).not(this).prop("disabled", true) : $("." + this.className).not(this).prop("disabled", false);
})

没有错误，每次单击都会打入console.log，但没有任何反应。我尝试过change（）和click（）都没有运气。

Answer 1

您唯一需要关心的是-this不是您在arrow functions中所期望的。将arrow函数转换为常规函数。

$(".group").change(function() {
  console.log("hitting the check box");
  this.checked ? $("." + this.className).not(this).prop("disabled", true) : $("." + this.className).not(this).prop("disabled", false);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="js-frameworks" class="group"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="express" class="group"> Express Workshop — Tuesday 9am-12pm, $100</label>

如何在保持选中的复选框启用的同时禁用分组复选框？

1 个答案: