当另一个复选框被勾选时，如何禁用该复选框，当未勾选该复选框时又如何重新启用？

Question

我目前正在使用Javascript尝试尝试此操作，这可能是我将复选框链接到脚本的方式吗？ 如果是这样，任何建议都将有所帮助。 编辑-复选框位于foreach循环内，单选框将不起作用，因为这不是我正在其中使用的确切情况。

选框

@Html.CheckBoxFor(modelItem => item.ambassador, htmlAttributes: new { @class = "checkbox", type = "checkbox" })

@Html.CheckBoxFor(modelItem => item.groupSelection, htmlAttributes: new { @class = "checkbox", type = "checkbox" })

使用Javascript

<script>
    $('.checkbox').change(function () {
        $(this).siblings('.checkbox').prop('disabled', this.checked);
    });
</script>

Javascript代码来自以下问题： 在mvc4中选择另一个复选框时禁用复选框

Answer 1

HTML已经为此内置了一个功能，它们称为单选按钮 ：

 <form> <input type="radio" name="option" value="first"> <label for="first">first</label> <input type="radio" name="option" value="second"> <label for="second">second</label> </form> 

从EchoEcho ：

当您要让访问者从一组替代选项中选择一个（也只有一个）选项时，可以使用单选按钮。 如果要同时允许更多选项，则应使用复选框。

因为只希望用户能够一次选择两个选项之一，所以应该使用单选按钮。

另请参见此ux.SE主题。

Answer 2

也许您的复选框在脚本加载后被加载.. ajax？ 部分？ 尝试将侦听器添加到您的body或父元素

 $(function(){ $('body').on('click', '.checkbox', function () { $(this).siblings('.checkbox').prop('disabled', this.checked); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="checkbox" type="checkbox"></input> check 1<br> <input class="checkbox" type="checkbox"></input> check 2<br> <input class="checkbox" type="checkbox"></input> check 3<br> <input class="checkbox" type="checkbox"></input> check 4<br>