如何限制選中複選框的計數等於使用jQuery的選擇值？

Question

我試圖根據用戶選擇的選項來限制複選框的數量，即option1 = 1複選框option 2 = 2複選框，如果他們嘗試選擇更多，然後提醒用戶和.prop("checked", false)。

但我只是得到奇怪的東西發生，我不明白爲什麼請幫助！

HTML：

<form> 
    <select onclick="systemSelected();" class="mySelectBox"> 
     <option value="1">option1</option> 
     <option value="2">option2</option> 
     <option value="3">option3</option> 
     <option value="4">option4</option> 
     <option value="5">option5</option> 
    </select> 
</form> 
<form onclick="limitCheckbox(userSelected);"> 
    <input type="checkbox" name="box1"> 
    <input type="checkbox" name="box2"> 
    <input type="checkbox" name="box3"> 
    <input type="checkbox" name="box4"> 
    <input type="checkbox" name="box5"> 
</form> 

的javascript：

​​3210

Answer 1

使用$("input[type=checkbox]").on('change',function(){選擇，這將在複選框的每一個變化火災事件。你可以通過條件來管理你的案例。

請檢查下面的代碼段。

var userSelected = 0; 
 
    $("input[type=checkbox]").on('change',function(){ 
 
    if($("input[type=checkbox]:checked").length > parseInt($(".mySelectBox").val())) { 
 
     $(this).prop("checked", false); 
 
     alert("too many numbers"); 
 

 

 
    } else if ($("input[type=checkbox]:checked").length === 0) { 
 

 
     alert("please select a game too play"); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select class="mySelectBox"> 
 
    <option value="1">option1</option> 
 
    <option value="2">option2</option> 
 
    <option value="3">option3</option> 
 
    <option value="4">option4</option> 
 
    <option value="5">option5</option> 
 
    </select> 
 

 
</form> 
 

 
<form> 
 
    <input type="checkbox" name="box1"> 
 
    <input type="checkbox" name="box2"> 
 
    <input type="checkbox" name="box3"> 
 
    <input type="checkbox" name="box4"> 
 
    <input type="checkbox" name="box5"> 
 
</form>

Answer 2

$('input:checkbox').change(function() { 
 

 
    var number = $('.mySelectBox option:selected').val(); 
 

 
    if ($('input:checkbox:checked').length > number) { 
 

 

 
    alert('more than selected') 
 
    $(this).prop('checked', false);//dont check the click checkbox 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select class="mySelectBox"> 
 
    <option value="1">option1</option> 
 
    <option value="2">option2</option> 
 
    <option value="3">option3</option> 
 
    <option value="4">option4</option> 
 
    <option value="5">option5</option> 
 
    </select> 
 

 
</form> 
 

 
<form> 
 
    <input type="checkbox" name="box1"> 
 
    <input type="checkbox" name="box2"> 
 
    <input type="checkbox" name="box3"> 
 
    <input type="checkbox" name="box4"> 
 
    <input type="checkbox" name="box5"> 
 
</form>

Answer 3

1. 不要使用警報（用戶爲什麼要覺得自己很蠢）
2. 使用disabled財產（讓用戶看到&知道）

var $ckb = $('[name*=box]'), 
 
    $sel = $('.mySelectBox'); 
 

 
function ckkk() { 
 

 
    var ckd = $ckb.filter(":checked").length, 
 
     max = parseInt($sel.val(), 10); 
 

 
    if(ckd > max) $ckb.prop({checked:false, disabled:false}); 
 
    else  $ckb.not(":checked").prop({disabled: ckd >= max}); 
 

 

 
} 
 

 
$ckb.add($sel).on("change", ckkk);

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

 
<select class="mySelectBox"> 
 
    <option value="1">option1</option> 
 
    <option value="2">option2</option> 
 
    <option value="3">option3</option> 
 
    <option value="4">option4</option> 
 
    <option value="5">option5</option> 
 
</select> 
 

 
<input type="checkbox" name="box1"> 
 
<input type="checkbox" name="box2"> 
 
<input type="checkbox" name="box3"> 
 
<input type="checkbox" name="box4"> 
 
<input type="checkbox" name="box5">