如何防止单击基础复选框
我有两个复选框和一个第三个，作为一个“切换所有”。我有以下标准：
- 当其他两个复选框都没有选中时，“切换全部”也应该被取消。
- 当选中另外两个复选框时，“切换全部”也应该被选中。
- 当只选中另一个复选框时，应该选中并禁用“所有切换”，以显示“半选中”状态。
此外，应该可以单击“所有切换”来检查或取消选中其他2(如果“切换全部”是半选中的，则两者都应该检查)。
我创建了以下JS/jQuery函数：
function setPdfDialogPriceCheckboxes(pElement)
{
var tSuperCheckbox = jQuery("#superCheckbox").next();
var tCheckbox1 = jQuery("#checkbox1");
var tCheckbox2 = jQuery("#checkbox2");
console.log(pElement.id);
if(pElement.id == "superCheckbox")
{
tSuperCheckbox.click();
var tCheckAll = tSuperCheckbox.is(':checked');
if(tCheckbox1.is(':checked') != tCheckAll)
{
tCheckbox1.click();
}
if(tCheckbox2.is(':checked') != tCheckAll)
{
tCheckbox2.click();
}
}
else
{
if(tCheckbox1.is(':checked') && tCheckbox2.is(':checked'))
{
tSuperCheckbox.prop('checked', true);
tSuperCheckbox.prop('disabled', false);
}
else if(tCheckbox1.is(':checked') || tCheckbox2.is(':checked'))
{
tSuperCheckbox.prop('checked', true);
tSuperCheckbox.prop('disabled', true);
}
else
{
tSuperCheckbox.prop('checked', false);
tSuperCheckbox.prop('disabled', false);
}
}
}此外，“切换所有”复选框有一个覆盖div，防止直接单击它，因此即使禁用复选框，我也可以处理onclick()-Events：
<div style="position: relative; ">
<div id="superCheckbox" onclick="setPdfDialogPriceCheckboxes(this)" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; "></div>
<input type="checkbox" />
</div>我在这里创建了一个小提琴：http://jsfiddle.net/9mhag8b6/
它可以在Firefox和Chrome上工作，但是Internet似乎忽略了覆盖div，让我直接单击复选框。
我知道我可能会使用“不确定”来显示复选框上的半选中状态，但我宁愿这样做。我目前的解决办法是使用图像，但在所有浏览器上，这看起来都是一样的，而复选框则不同。
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
发布于 2014-09-11 15:17:02
演示http://jsfiddle.net/9mhag8b6/6/
为了避免不能单击禁用复选框的问题，让我们将其改为半透明的。
您说您使用了Jquery，部分地使用了Jquery。在这里，它最大限度地使用jQuery。
我使用这个HTML，与类，标签和没有onlick事件。每个复选框上都不需要ID，您只需要明确地从所有复选框中识别出“超级复选框”。当javascript的函数是同义词(例如if (checkbox1.is(':checked') && checkbox2.is(':checked')) )时，您确实应该避免为所有东西分配it，并在javascript中单独引用它们--这会使代码比需要的要混乱得多，不必要地大得多。
<label><input type="checkbox" class="setPdfDialogPriceCheckboxes" id="superCheckbox" /> Preisanzeige</label>
<div class="indent">
<label><input class="setPdfDialogPriceCheckboxes" type="checkbox" /> Preis</label>
<label><input class="setPdfDialogPriceCheckboxes" type="checkbox" /> Ø-Preis</label>
</div>JQuery。通过使用.prop()而不是.attr()，我们不必使用.trigger('change')，这将导致递归问题。您还将看到可以链接事件，而不是编写像tSuperCheckbox.prop('checked', true); tSuperCheckbox.prop('disabled', false);这样的代码。变量赋值中的$表示它是一个jQuery对象，它不是必要的，它是一个首选项。
$(function(){
$('.setPdfDialogPriceCheckboxes').on('change', function(){
// assign these to make it easier to read and not look up > once
var $superCheckbox = $('#superCheckbox');
var $checkboxes = $('.setPdfDialogPriceCheckboxes').not($superCheckbox);
// create a reduced list of the ones that are checked
var $checkboxes_checked = $checkboxes.map(function(){
if ($(this).is(':checked')) return true;
});
// supercheckbox does something different to the rest
if ($(this).is($superCheckbox)){
var check;
// ignore current status of this checkbox, check all if < all are checked
if ($checkboxes_checked.length == $checkboxes.length){
// they are all checked
check = false;
}else{
check = true;
}
$checkboxes.add($superCheckbox).prop({checked: check});
$superCheckbox.css({opacity: 1});
}else{
// are they all checked?
if ($checkboxes_checked.length == $checkboxes.length){
// all checked
$superCheckbox.prop({checked: true}).css({opacity: 1});
}else if (!$checkboxes_checked.length){
// none checked
$superCheckbox.prop({checked: false}).css({opacity: 1});
}else{
// some checked
$superCheckbox.prop({checked: true}).css({opacity: 0.5});
}
}
});
});Stack Overflow用户
发布于 2014-09-11 15:21:29
不如不要把“检查所有”变成灰色，你只是稍微淡出一点，这样你还会有一个可点击的复选框。下面是一个简单的例子：
/* CSS */
#toggle-all{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.some-toggle { /* you can add more styles if necessary */
filter: alpha(opacity=50); /*IE*/
opacity: 0.5;
}
/* HTML */
<label id="toggle-all">
<input type="checkbox" id="toggle-all-checkbox"> Toggle All
</label>
<div>
<label><input type="checkbox" id="checkbox1"> Checkbox 1 </label>
<label><input type="checkbox" id="checkbox2"> Checkbox 2 </label>
</div>
/* JS */
$("#toggle-all-checkbox, #checkbox1, #checkbox2").on('click', function(){
if (this.id == 'toggle-all-checkbox') {
$('#checkbox1, #checkbox2').prop('checked', this.checked);
} else {
var checked1 = $('#checkbox1').prop('checked'),
checked2 = $('#checkbox2').prop('checked');
if (checked1 && checked2) {
$('#toggle-all-checkbox').removeClass('some-toggle').prop('checked', true);
} else {
if (!checked1 && !checked2)
$('#toggle-all-checkbox').removeClass('some-toggle').prop('checked', false);
else
$('#toggle-all-checkbox').addClass('some-toggle').prop('checked', true);
}
}
});我还没有测试这段代码，但我希望它能给您提供另一个关于如何处理这个问题的想法。
https://stackoverflow.com/questions/25790348
复制相似问题
腾讯云开发者
