gpt4 book ai didi

jquery - 限制用户在 jQuery 中选中复选框

转载 作者:行者123 更新时间:2023-12-01 01:01:30 26 4
gpt4 key购买 nike

我有一堆复选框,我想限制用户根据选择框值检查复选框。

例如,如果用户在选择框中选择值 - 3,则他只能选中 3 个复选框(任意三个)

演示:Fiddle

HTML

<select id="count">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br/><br/>

<div class="checkbox">
<input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
<label for="checkbox-1">HTML</label>
<br />
<input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
<label for="checkbox-2">CSS</label>
<br />
<input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
<label for="checkbox-3">HTML</label>
<br />
<input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
<label for="checkbox-5">CSS</label>
<br />
<input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
<label for="checkbox-5">HTML</label>
<br />
<input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
<label for="checkbox-6">CSS</label>
</div>

我该怎么做?请问有人可以帮我吗?

最佳答案

根据 Pavlo 的有用评论进行更新

演示: http://jsfiddle.net/HNmhL/23/

JQuery
// Cache the selector
var checkBoxes = $('input[type=checkbox]');

checkBoxes.click(function() {
validateCheckboxes();
});


$('#count').change(function() {
// Only neave the first N items checked (where N = number of items allowed)
checkBoxes.filter(':checked:gt(' + ($(this).val() - 1) + ')').attr('checked', false);
validateCheckboxes();
});

function validateCheckboxes() {
// If the number of checked items exceeds the number allowed
if (checkBoxes.filter(':checked').length >= $('#count').val()) {
// Disable all un-checked boxes...
checkBoxes.not(':checked').attr('disabled', true);
} else {
// We haven't hit out limit yet; make sure the checkboxes are still enabled
checkBoxes.attr('disabled', false);
}
};

关于jquery - 限制用户在 jQuery 中选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18699839/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com