在複選框上添加最大`可檢查`限制

-1

比方說，我在頁面上有10個複選框。我正在尋找非常具體與行爲的東西：在複選框上添加最大`可檢查`限制

變量假設maxSelections可以用來控制最大可選複選框達到maxSelections
後，頁面上的其他複選框都應該被禁用
在這個時候，已經檢查那些不應該被禁用的用戶必須擁有從取消選中的東西在這裏的選項，選擇其他可用的複選框

PS我refered這個JSFiddle，但不能g ^等點-2是工作預先感謝幫助

var limit = 3; 
$('input.single-checkbox').on('change', function(evt) { 
    if($(this).siblings(':checked').length >= limit) { 
     this.checked = false; 
    } 
});

來源

2017-04-13 Sharique Iqubal

請編輯您的問題，直接在問題主體中顯示相關代碼。除了鏈接的副本外，請參閱[此問題]（http://stackoverflow.com/questions/19001844/how-to-limit-the-number-of-selected-checkboxes）（其中[others]（http：/ /stackoverflow.com/questions/14463238/limit-number-of-checkboxes-allowed-to-be-checked））。 – nnnnnn

我已經引用了你提到的問題，並說明了爲什麼我遇到了它提供的解決方案問題。對不起，沒有在我的問題中包括JS –

你沒有在你的問題中引用其他問題，你只是鏈接到一個小提琴，但無論如何，我鏈接到的其他問題已解決同一問題，包括部分禁用其他複選框。檢查[接受的答案]（http://stackoverflow.com/a/2966456/615754） - 在點擊處理程序中只需要兩行代碼（或者如果您不使用工作變量）。 – nnnnnn

我們可以利用僞類來獲得的複選框

狀態：檢查：選擇所有複選框當前已籤

：沒有（：選中）：選擇當前未籤

所有複選框

一旦我們有這兩種狀態可用，我們可以使用下面的jQuery的語法來設置複選框

$(<checkboxElememt>).prop('disabled', <true/false>);

這裏的disabled屬性的一個片段，它回答你所需要的：

var maxSelections = 3 
 

 
$('input[type="checkbox"]').change(function() { 
 
     var currentCount = $('input[type="checkbox"]:checked').length // Here we can get the number of checkboxs checked 
 
     // :checked pseudo selects all teh checkboxes that are checked 
 

 
     if (currentCount >= maxSelections) { 
 
     $('input[type="checkbox"]:not(:checked)').prop('disabled', true); // :not(:checked) pseudo is used to select and disable all unchecked checkbox 
 
     } else { 
 
      $('input[type="checkbox"]').prop('disabled', false); // Else, let's enable all the checkboxes 
 
     } 
 
     });

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 

 
<div> 
 
    <input type="checkbox" name="op1" id="op1" /> 
 
    <label for="op1">Option 1</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox" name="op2" id="op2" /> 
 
    <label for="op2">Option 2</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox" name="op3" id="op3" /> 
 
    <label for="op3">Option 3</label> 
 
</div> 
 
<div> 
 
    <input type="checkbox" name="op4" id="op4" /> 
 
    <label for="op4">Option 4</label> 
 
</div> 
 

 
<div> 
 
    <input type="checkbox" name="op5" id="op5" /> 
 
    <label for="op5">Option 5</label> 
 
</div> 
 

 
<div> 
 
    <input type="checkbox" name="op6" id="op6" /> 
 
    <label for="op6">Option 6</label> 
 
</div>

來源

2017-04-13 03:46:41

感謝您對僞類的解釋。我會做同樣的研究 –

在複選框上添加最大`可檢查`限制

回答

相關問題