これを行う方法がわかりません。
3 つのチェックボックスがあり、そのうちの 1 つをクリックすると、他のチェックボックスが無効になります。jQueryを使用してこれを達成するにはどうすればよいですか
<input type="checkbox" name="box1" >
<input type="checkbox" name="box2" >
<input type="checkbox" name="box3" >
これで私を助けてください。
クラス名を使用して DOM 要素を参照することを常にお勧めします。これにより、コードがよりクリーンで目立たなくなります。このコードは、はるかに包括的で保守が容易です。
<input type="checkbox" name="box1" class="check checker">
<input type="checkbox" name="box2" class="check">
<input type="checkbox" name="box3" class="check">
JS:
$('.checker').change(function() {
$('.check').not(this).prop('disabled', this.checked);
});
この場合、 JSコードを変更することなく、チェックボックスの場所(siblings
アプローチが壊れる)、名前(失敗する)を変更できます。[name^="box"]
$('input[type="checkbox"]').click(function() {
$(this).siblings().attr('disabled', true);
});
または、選択解除時にチェックボックスを有効にしたい場合は、これを使用できます。
$('input[type="checkbox"]').click(function() {
$(this).siblings().attr('disabled', this.checked);
});
これを試して
$('input:checkbox').click(function() {
$(this).siblings('input:checkbox').not(this).attr("disabled","disabled");
});
<div>
<input type="checkbox" name="box1" >
<input type="checkbox" name="box2" >
<input type="checkbox" name="box3" >
</div>
$('input[name^="box"]').click(function() {
if($(this).is(":checked"))
$(this).siblings().attr('checked', false);
})
編集: JSFiddle。
:not() フィルターを使用して、クリックされたチェックボックスを除外できます。
$("input[type='checkbox']").click(function(){
var name = $(this).attr("name");
$("input[type='checkbox']:not(input[name='"+name+"'])").attr("disabled", "disabled");
});
あなたはこれを試すことができます、
$('input:checkbox').click(function(){
$('input:checkbox').not($(this)).attr("disabled", true);
});