如何select all/unselect所有未禁用的复选框?
How to select all/unselect all the check boxes which are not disabled?
我有多个复选框输入,但有些被禁用。因此,当我单击 select all/unselect 顶部的所有复选框时,我想将此事件应用于唯一启用的复选框。此外,当我通过单击每个复选框选中所有复选框时,必须单击 select 所有复选框。
注意 :我还有一个功能,当启用的复选框被点击并随后点击保存时,那个特定的复选框将是 disabled.I 可以添加使用添加新复选框按钮的新复选框。添加新复选框时,必须取消选中 select all/unselect 所有复选框。
HTML
<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
<tr>
<td>
<input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
</tr>
</table>
<button id="add">
Add check box
</button>
<button id="save">
Save
</button>
JQuery
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
$(document).ready(function() {
$('.checkBoxClass').click(function() {
var selected = $('.checkBoxClass').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
});
$(document).ready(function() {
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
})
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
})
要检测禁用的复选框,您可以使用 jquery filter
方法,如下所示:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));
通过像这样使用 filter
,JQuery 更改没有禁用属性的复选框。
并使用 .prop('checked', false)
或 .attr('checked', false)
取消选中添加新复选框按钮上的复选框。
所以取消选中 select 全部保存并添加复选框使用:
$("#ckbCheckAll").attr('checked', false);
要取消选中 addcheckbox 上所有已启用的复选框,请使用:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', false);
您还应该使用 $(document).on("click",".checkBoxClass",function(){})
活页夹让 JQuery 为动态添加的复选框绑定 click
事件。通过这样做并添加一些额外的 jquery,select 所有复选框,当所有复选框都被选中时被选中。
试试这个,它只会启用复选框和 select/unselect 它们。
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass:enabled").prop('checked', $(this).checked);
});
});
检查fiddle
http://jsfiddle.net/p73wW/8/
试试这个:
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
var checked = false;
if($(this).prop('checked') == true) {
checked = true;
}
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
$(this).find(".checkBoxClass").prop('checked', checked);
}
});
});
$('.checkBoxClass').click(function() {
var i = 1;
var totalCheckboxes = $("#myTable tbody tr").length;
if($(this).prop('checked') == true) {
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
if($(this).find(".checkBoxClass").prop('checked') == true) {
i++;
}
}
});
}
if(i==totalCheckboxes) {
$("#ckbCheckAll").prop('checked', true);
} else {
$("#ckbCheckAll").prop('checked', false);
}
});
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
$("#ckbCheckAll").prop('checked', false);
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});
这是另一种方法。我没有使用 filter
,而是使用了 :enabled
。还使用 on
jquery 来检测新添加的复选框。希望对你有帮助。
$(document).on('click','.checkBoxClass',function() {
var selected = $('.checkBoxClass:enabled').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
我有多个复选框输入,但有些被禁用。因此,当我单击 select all/unselect 顶部的所有复选框时,我想将此事件应用于唯一启用的复选框。此外,当我通过单击每个复选框选中所有复选框时,必须单击 select 所有复选框。
注意 :我还有一个功能,当启用的复选框被点击并随后点击保存时,那个特定的复选框将是 disabled.I 可以添加使用添加新复选框按钮的新复选框。添加新复选框时,必须取消选中 select all/unselect 所有复选框。
HTML
<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
<tr>
<td>
<input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
</tr>
</table>
<button id="add">
Add check box
</button>
<button id="save">
Save
</button>
JQuery
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
$(document).ready(function() {
$('.checkBoxClass').click(function() {
var selected = $('.checkBoxClass').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
});
$(document).ready(function() {
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
})
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
})
要检测禁用的复选框,您可以使用 jquery filter
方法,如下所示:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));
通过像这样使用 filter
,JQuery 更改没有禁用属性的复选框。
并使用 .prop('checked', false)
或 .attr('checked', false)
取消选中添加新复选框按钮上的复选框。
所以取消选中 select 全部保存并添加复选框使用:
$("#ckbCheckAll").attr('checked', false);
要取消选中 addcheckbox 上所有已启用的复选框,请使用:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', false);
您还应该使用 $(document).on("click",".checkBoxClass",function(){})
活页夹让 JQuery 为动态添加的复选框绑定 click
事件。通过这样做并添加一些额外的 jquery,select 所有复选框,当所有复选框都被选中时被选中。
试试这个,它只会启用复选框和 select/unselect 它们。
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass:enabled").prop('checked', $(this).checked);
});
});
检查fiddle http://jsfiddle.net/p73wW/8/
试试这个:
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
var checked = false;
if($(this).prop('checked') == true) {
checked = true;
}
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
$(this).find(".checkBoxClass").prop('checked', checked);
}
});
});
$('.checkBoxClass').click(function() {
var i = 1;
var totalCheckboxes = $("#myTable tbody tr").length;
if($(this).prop('checked') == true) {
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
if($(this).find(".checkBoxClass").prop('checked') == true) {
i++;
}
}
});
}
if(i==totalCheckboxes) {
$("#ckbCheckAll").prop('checked', true);
} else {
$("#ckbCheckAll").prop('checked', false);
}
});
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
$("#ckbCheckAll").prop('checked', false);
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});
这是另一种方法。我没有使用 filter
,而是使用了 :enabled
。还使用 on
jquery 来检测新添加的复选框。希望对你有帮助。
$(document).on('click','.checkBoxClass',function() {
var selected = $('.checkBoxClass:enabled').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})