當另一個復選框被勾選時，如何禁用該復選框，當未勾選該復選框時又如何重新啟用？

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>