作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这里我在各自的 div 中有一堆复选框。
每个 div 将包含一个“data-min”(例如:data-min="2")值,以限制用户检查 div 中复选框的最少数量。
演示: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" data-toggle="false" data-min="2" style='float:left;background:yellow;width:100px'>
<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 />
</div>
<div class="checkbox" data-toggle="false" data-min="2" style='float:left;margin-left:100px;background:brown;width:100px'>
<input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
<label for="checkbox-4">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>
jQuery
$(document).ready(function () {
$('#count').on('change', function () {
$('input[type=checkbox]').prop('checked', false);
$('[data-toggle]').data('toggle', false);
});
$('input[type=checkbox]').on('change', function () {
if ($('input[type=checkbox]:checked').length > $('#count').val()) {
$(this).prop('checked', false);
}
});
$('.checkbox').on('click', function (e) {
var cnt = $('input[type="checkbox"]:checked').length;
var cntSel = $('select').val();
var fin = cntSel - cnt;
var min = $('.checkbox').data('min');
if (e.target.className == "checkbox") {
if ($(this).data('toggle') == false) {
$(this).data('toggle', true);
$(this).find('input[type="checkbox"]:lt(' + fin + ')').prop('checked', true);
} else {
$(this).data('toggle', false);
$(this).find('input[type="checkbox"]').prop('checked', false);
}
}
});
});
我该怎么做,谁能帮我。
编辑1:
例如,
最佳答案
经过一番努力,终于得到了答案
jQuery
$(document).ready(function () {
$('#count').on('change', function () {
//do stuff here
//my random "on change" behaviour {
var chkboxes = $('input[type=checkbox]:checked');
for (var i = 0; i < chkboxes.length; i++) {
$(chkboxes[i]).prop('checked', false);
}
//end of my random "on change" bahaviour}
});
$('input[type=checkbox]').on('change', function (e) {
//this was deselected no need to check?
if (!$(this).prop('checked')) {
return false;
}
//checked count exceeded #count value
if ($('input[type=checkbox]:checked').length > $('#count').val()) {
$(this).prop('checked', false);
alert('Count of checked checkboxes >= #count');
return false;
}
//if checked check boxes count = #count, validate all divs
if ($('input[type=checkbox]:checked').length == $('#count').val()) {
validateDivs();
}
var checksLeft = parseInt($('#count').val()) - $('input[type=checkbox]:checked').length;
var parent = $($(this).parent()[0]);
var parentSub = parent.find('input[type=checkbox]:checked').length; //count of checked checkboxes in current parent
if (parseInt(parent.attr('data-min')) - parentSub > checksLeft) {
$(this).prop('checked', false);
alert('Not enought checks left');
return false;
}
});
$('.checkbox').on('click', function (e) {
var cnt = $('input[type="checkbox"]:checked').length;
var cntSel = $('select').val();
var fin = cntSel - cnt;
var min = $(this).data('min');
if (e.target.className == "checkbox") {
if ($(this).data('toggle') == false) {
$(this).data('toggle', true);
if (fin < min) {
$(this).prop('checked', false);
alert("Minimun capacity of this table is: " + min + ".");
} else {
$(this).find('input[type="checkbox"]:lt(' + fin + ')').prop('checked', true);
}
} else {
$(this).data('toggle', false);
$(this).find('input[type="checkbox"]').prop('checked', false);
}
}
});
});
function validateDivs() {
var chkboxes = $('.checkbox');
for (var i = 0; i < chkboxes.length; i++) {
var chks = $(chkboxes[i]).find('input[type=checkbox]:checked');
if (chks.length < $(chkboxes[i]).attr('data-min')) {
chks.each(function (index, checkbox) {
$(checkbox).prop('checked', false);
})
}
}
}
感谢大家支持我解决这个问题。
关于jquery - 使用 jQuery 限制用户根据最小值检查复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18711072/
我是一名优秀的程序员,十分优秀!