我有以下HTML:
<div class="pricing-levels-3">
<p><strong>Which level would you like? (Select 3 Levels)</strong></p>
<input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>
直播网站:
http://www.chineselearnonline.com/amember/signup20.php
我该怎么做才能让用户只选择其中3个复选框?
答案 0 :(得分:55)
使用change
事件,您可以执行以下操作:
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
答案 1 :(得分:31)
试试这样。
关于改变事件,
$('input[type=checkbox]').on('change', function (e) {
if ($('input[type=checkbox]:checked').length > 3) {
$(this).prop('checked', false);
alert("allowed only 3");
}
});
中查看此内容
答案 2 :(得分:6)
试试这个DEMO:
$(document).ready(function () {
$("input[name='vehicle']").change(function () {
var maxAllowed = 3;
var cnt = $("input[name='vehicle']:checked").length;
if (cnt > maxAllowed)
{
$(this).prop("checked", "");
alert('Select maximum ' + maxAllowed + ' Levels!');
}
});
});
答案 3 :(得分:3)
我认为我们应该使用click
代替change
正在使用 DEMO
答案 4 :(得分:2)
$("input:checkbox").click(function(){
if ($("input:checkbox:checked").length > 3){
return false;
}
});
答案 5 :(得分:1)
试试这个
var theCheckboxes = $(".pricing-levels-3 input[type='checkbox']");
theCheckboxes.click(function()
{
if (theCheckboxes.filter(":checked").length > 3)
$(this).removeAttr("checked");
});
答案 6 :(得分:1)
我想像letiagoalves说的那样,但你的表单中可能有多个复选框问题,所以我建议这样做:
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($('input.single-checkbox').siblings('input.single-checkbox:checked').length > limit) {
this.checked = false;
}
});
答案 7 :(得分:1)
$('.checkbox').click(function(){
if ($('.checkbox:checked').length >= 3) {
$(".checkbox").not(":checked").attr("disabled",true);
}
else
$(".checkbox").not(":checked").removeAttr('disabled');
});
我用了这个。
答案 8 :(得分:0)
这就是我的工作方式:
// Function to check and disable checkbox
function limit_checked( element, size ) {
var bol = $( element + ':checked').length >= size;
$(element).not(':checked').attr('disabled',bol);
}
// List of checkbox groups to check
var check_elements = [
{ id: '.group1 input[type=checkbox]', size: 2 },
{ id: '.group2 input[type=checkbox]', size: 3 },
];
// Run function for each group in list
$(check_elements).each( function(index, element) {
// Limit checked on window load
$(window).load( function() {
limit_checked( element.id, element.size );
})
// Limit checked on click
$(element.id).click(function() {
limit_checked( element.id, element.size );
});
});
答案 9 :(得分:0)
我已将此功能改为自动取消选中之前的
var limit = 3;
$('.compare_items').on('click', function(evt) {
index = $(this).parent('td').parent('tr').index();
if ($('.compare_items:checked').length >= limit) {
$('.compare_items').eq(localStorage.getItem('last-checked-item')).removeAttr('checked');
//this.checked = false;
}
localStorage.setItem('last-checked-item', index);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="compare_items">1
<input type="checkbox" class="compare_items">2
<input type="checkbox" class="compare_items">3
<input type="checkbox" class="compare_items">4
<input type="checkbox" class="compare_items">5
<input type="checkbox" class="compare_items">6
<input type="checkbox" class="compare_items">7
<input type="checkbox" class="compare_items">8
<input type="checkbox" class="compare_items">9
<input type="checkbox" class="compare_items">10
&#13;
答案 10 :(得分:0)
我今天是这样做的,不同之处在于我想取消选中最旧的复选框,而不是阻止用户检查新的复选框:
let maxCheckedArray = [];
let assessmentOptions = jQuery('.checkbox-fields').find('input[type="checkbox"]');
assessmentOptions.on('change', function() {
let checked = jQuery(this).prop('checked');
if(checked) {
maxCheckedArray.push(jQuery(this));
}
if(maxCheckedArray.length >= 3) {
let old_item = maxCheckedArray.shift();
old_item.prop('checked', false);
}
});
答案 11 :(得分:0)
如果要取消选中您首先选择的复选框,则允许3个复选框。用香草javascript;您需要在html输入复选框中分配onclick =“ checking(this)”
var queue = [];
function checking(id){
queue.push(id)
if (queue.length===3){
queue[0].checked = false
queue.shift()
}
}
答案 12 :(得分:0)
此功能只是检查您是否刚刚选中了一个复选框。如果是,则将 checked
值加一。如果达到限制,则拒绝下一个复选框。
var limit = 3;
var checked = 0;
$('.single-checkbox').on('change', function() {
if($(this).is(':checked'))
checked = checked+1;
if($(this).is(':checked') == false)
checked = checked-1;
if(checked > limit) {
this.checked = false;
checked = limit;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-levels-3">
<p><strong>Which level would you like? (Select 3 Levels)</strong></p>
<input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>