如何一个接一个地禁用复选框？

-1

<input type="checkbox" name="checkbox1" value="checkbox1"> 
<input type="checkbox" name="checkbox2" value="checkbox2">

我想实现代码，其中当checkbox1被选中，checkbox2被禁止，当checkbox2检查，checkbox1被禁用。当它未被检查时，它应该使另一个回来。

如何用jQuery或JavaScript实现？

来源

2012-07-11 spotlightsnap

首先，我假设你想做的工作不能通过单选按钮完成，因为这是明显的选择。如果可以，这里是为几个环节： http://wiki.answers.com/Q/What_are_the_differences_between_radio_buttons_and_checkboxes http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

Checkbox 1: <input id="checkbox1" type="checkbox" onchange="onCheckboxChanged();"/> 
Checkbox 2: <input id="checkbox2" type="checkbox" onchange="onCheckboxChanged();"/> 
<script type="text/javascript"> 
    //Initialize checkboxes 
    onCheckboxChanged(); 
</script>

JS：

var onCheckboxChanged = function(checkbox){ 
    var checkbox1 = document.getElementById('checkbox1'); 
    var checkbox2 = document.getElementById('checkbox2'); 

    if(checkbox1.checked){ 
     checkbox2.disabled = true; 
    } 
    else { 
     checkbox2.disabled = false; 
    } 

};

来源

2012-07-11 03:17:18

是的，与我目前的表单结构，它将无法使用单选按钮，这就是为什么。你的代码就像一个魅力。谢谢。 – spotlightsnap 2012-07-11 03:30:47

但是，该函数只测试'checkbox1'，当checkbox2被选中时它不执行任何操作。（另外，你可以用一行替换if/else结构：'checkbox2.disabled = checkbox1.checked;'。） – nnnnnn 2012-07-11 03:37:25

试试这个代码，

HTML，

<input type="checkbox" name="checkbox1" value="checkbox1"/> 
<input type="checkbox" name="checkbox2" value="checkbox2"/>

的JavaScript，

$('[type="checkbox"]').click(function() { 
    if ($(this).is(":checked")) { 
     $('[type="checkbox"]').not(this).attr('disabled', 'disabled'); 
    } else { 
     $('[type="checkbox"]').not(this).removeAttr('disabled'); 
    } 

});

演示

http://jsfiddle.net/rsxXd/

来源

2012-07-11 03:20:24

谢谢你的工作。 – spotlightsnap 2012-07-11 03:31:00

该解决方案的一个缺点是它会影响所有复选框。 – RobB 2012-07-11 03:34:12

这里是jQuery的例子http://jsfiddle.net/XnQzQ/

$('input[name=checkbox1]').click(function() { 
     if($('input[name=checkbox1]').is(':checked')) 
     { 
     $('input[name=checkbox2]').attr("disabled", "disabled") 
     } 
     else 
     { 
     $('input[name=checkbox2]').removeAttr("disabled"); 
     } 
    }); 
    $('input[name=checkbox2]').click(function() { 
    if($('input[name=checkbox2]').is(':checked')) 
    { 
    $('input[name=checkbox1]').attr("disabled", "disabled") 
    } 
    else 
    { 
    $('input[name=checkbox1]').removeAttr("disabled"); 
    } 
});

来源

2012-07-11 03:24:10

感谢您的代码。这对我来说很长，但它很有用。万分感谢。 – spotlightsnap 2012-07-11 03:31:37

'$（'input [name = checkbox1]'）。is（'：checked'）'可以替换为'this.checked' - 易于阅读和输入，并且在运行时更加高效... – nnnnnn 2012-07-11 03:49:36

避免的jQuery的矫枉过正，只使用纯JavaScript。

HTML：

<input type="checkbox" id="checkbox1" value="checkbox1" onchange="checker()" /> 
<input type="checkbox" id="checkbox2" value="checkbox2" onchange="checker()" />

的JavaScript：

function checker() { 
    var checkbox1 = document.getElementById('checkbox1'); 
    var checkbox2 = document.getElementById('checkbox2'); 

    checkbox1.disabled = checkbox2.checked; 
    checkbox2.disabled = checkbox1.checked; 
}

演示：使用jQuery http://jsfiddle.net/fEpWJ/

来源

2012-07-11 03:24:15 RobB

感谢您的纯粹的JavaScript。它像一个魅力。谢谢。 – spotlightsnap 2012-07-11 03:31:15

'checkbox1.disabled = checkbox2.checked;'就够了，你不需要'？：'操作符。 – nnnnnn 2012-07-11 03:40:26

因为true或false的结果而设置禁用状态的好处。 – RobB 2012-07-11 03:43:27

简单：

$(document).ready(function() { 
    var $cbs = $('input[type="checkbox"][name^="checkbox"]').click(function() { 
     $cbs.not(this).prop('disabled', this.checked); 
    }); 
});

演示：http://jsfiddle.net/j6Jpz/

虽然这个想法是为了防止在同一时间被检查我建议它为用户更好，如果你离开已启用，但是当一个自动检查取消的两个复选框其他：

$(document).ready(function() { 
    var $cbs = $('input[type="checkbox"][name^="checkbox"]').click(function() { 
     if (this.checked) $cbs.not(this).prop('checked', false); 
    }); 
});

演示：http://jsfiddle.net/j6Jpz/1/

注：我使用的选择，'input[type="checkbox"][name^="checkbox"]'说，找到类型为checkbox的所有投入与开头的名称“复选框”。如果您将一个普通的类class="someClass"添加到相关输入中，则可将其简化为'input.someClass'。

请注意，我的代码的任一版本都会自动处理更大的复选框组。

来源

2012-07-11 03:30:32 nnnnnn

如何一个接一个地禁用复选框？

回答

相关问题