作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想阻止用户在检查了一定数量的复选框后检查另一个复选框。即,选中 3 个复选框后,用户无法再选中,并显示一条消息“您不能选择超过 3 个复选框。”
我已经快到了,但最后一个复选框仍在选中,我不希望这样,我希望在显示消息时取消选中它。
我该怎么做:
var productList = $('.prod-list'),
checkBox = productList.find('input[type="checkbox"]'),
compareList = $('.compare-list ul');
productList.delegate('input[type="checkbox"]', 'click', function () {
var thisElem = $(this),
thisData = thisElem.data('compare'),
thisImg = thisElem.closest('li').find('img'),
thisImgSrc = thisImg.attr('src'),
thisImgAlt = thisImg.attr('alt');
if (thisElem.is(':checked')) {
if ($('input:checked').length < 4) {
compareList.append('<li data-comparing="' + thisData + '"><img src="' + thisImgSrc + '" alt="'+ thisImgAlt +'" /><li>');
} else {
$('input:checked').eq(2).attr('checked', false);
alert('You\'re not allowed to choose more than 3 boxes');
}
} else {
var compareListItem = compareList.find('li');
for (var i = 0, max = compareListItem.length; i < max; i++) {
var thisCompItem = $(compareListItem[i]),
comparingData = thisCompItem.data('comparing');
if (thisData === comparingData) {
thisCompItem.remove();
}
}
}
});
最佳答案
我可能误解了这个问题...请参阅我的评论。
如果要阻止选择,您可以调用 event.preventDefault()
并使用 event
参数定义处理程序。
$('input[type="checkbox"]').click(function(event) {
if (this.checked && $('input:checked').length > 3) {
event.preventDefault();
alert('You\'re not allowed to choose more than 3 boxes');
}
});
或者,将 this.checked
设置为 false
。这甚至会阻止浏览器呈现复选标记。
关于javascript - 在 jQuery 或 JavaScript 中选中多个复选框后停止选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8066673/
我是一名优秀的程序员,十分优秀!