如何確保只有一個複選框保持檢出狀態？

Question

我有一些HTML與複選框（使用單選按鈕是不方便的，因爲生成HTML的庫 - 添加細節，我需要在圖書館外自己破解一個或找到一個非常規的方式來使圖書館爲我工作）。

我需要模擬單選按鈕的功能，特別是 - 當從多個框中檢查單個框時，應該取消選中所有其他框。

我想取消選中所有框，然後檢查我點擊的那個。我的jQuery/JS失敗。你能幫我嗎？

$(function() { 
 
    //check first box 
 
    $("input.duty:first").attr("checked", "true"); 
 

 
    //clicking unchecked box should check that box 
 
    //unchecks all others 
 
    $(".duty").on('click', function(event) { 
 
    $("input.duty").attr("checked", "false"); 
 
    $(this).prop("checked", true); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="casePointsFieldset"> 
 
    <fieldset class="casePointFieldset"> 
 
    <div> 
 
     <label><span>Duty:</span> 
 
         <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0"></label> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset class="casePointFieldset"> 
 

 
    <div> 
 
     <label><span>Duty:</span> 
 
         <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0"></label> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset class="casePointFieldset"> 
 
    <div> 
 
     <label><span>Duty:</span> 
 
         <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0"></label> 
 
    </div> 
 
    </fieldset> 
 
</div>

Answer 1

• 在所有情況下使用.prop，而不是混合使用.prop/.attr。
• 使用true和false而不是字符串。

更新片段：

$(function() { 
 
    //check first box 
 
    $("input.duty:first").prop("checked", true); 
 

 
    //clicking unchecked box should check that box 
 
    //unchecks all others 
 
    $(".duty").on('click', function(event) { 
 
    $("input.duty").prop("checked", false); 
 
    $(this).prop("checked", true); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="casePointsFieldset"> 
 
    <fieldset class="casePointFieldset"> 
 
    <div> 
 
     <label><span>Duty:</span> 
 
         <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0"></label> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset class="casePointFieldset"> 
 

 
    <div> 
 
     <label><span>Duty:</span> 
 
         <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0"></label> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset class="casePointFieldset"> 
 
    <div> 
 
     <label><span>Duty:</span> 
 
         <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0"></label> 
 
    </div> 
 
    </fieldset> 
 
</div>

Answer 2

實現這一目標的最簡單的方法是調用prop('checked', false)上的所有其他複選框被點擊其中任何一個的時候，是這樣的：

$(".duty").first().prop('checked', true).end().on('click', function(event) { 
 
    $('.duty').not(this).prop('checked', false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="casePointsFieldset"> 
 
    <fieldset class="casePointFieldset"> 
 
    <div> 
 
     <label> 
 
     <span>Duty:</span> 
 
     <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0"> 
 
     </label> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset class="casePointFieldset"> 
 
    <div> 
 
     <label> 
 
     <span>Duty:</span> 
 
     <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0"> 
 
     </label> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset class="casePointFieldset"> 
 
    <div> 
 
     <label> 
 
     <span>Duty:</span> 
 
     <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0"> 
 
     </label> 
 
    </div> 
 
    </fieldset> 
 
</div>

Answer 3

如果您只想一個複選框，你應該考慮單選按鈕。

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/radio

這應該更好地適應使用情況。讓我知道你是否需要實施方面的幫助。

我知道你說收音機很難因爲你的使用情況，但你應該認真考慮擴展你的庫與單選按鈕的功能。從HTML的角度來看，它更加正確，並且形成了UI/UX的立場。

Answer 4

嘗試將checked屬性設置爲布爾值false而不是字符串"false"。

使用字符串將被解釋爲true。

$("input.duty").attr("checked", false);