-1

名前の異なる2つのチェックボックスがあります。

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

チェックボックス1をオンにするとチェックボックス2を無効にし、チェックボックス2をオンにするとチェックボックス1を無効にするコードを実装したいと思います。チェックを外すと、もう一方も有効になります。

jQueryまたはJavaScriptでどのように達成できますか？

4

5 に答える 5

2

まず、ここでは当然の選択であるため、ラジオボタンを使用して実行したい作業を実行できないと想定しています。可能であれば、そのためのリンクをいくつか示します。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-11T03:17:18.903 に答える
2

このコードを試してください、

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-11T03:20:24.123 に答える
1

これが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-11T03:24:10.370 に答える
1

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;
}​

デモ： http： //jsfiddle.net/fEpWJ/

于 2012-07-11T03:24:15.280 に答える
0

jQueryでシンプル：

$(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"]'、「チェックボックス」で始まる名前のチェックボックスタイプのすべての入力を検索するように指示しています。これは、問題の入力に'input.someClass'共通のクラス、を指定した場合に簡略化できます。class="someClass"

私のコードのどちらのバージョンも、チェックボックスのより大きなグループを自動的に処理することにも注意してください。

于 2012-07-11T03:30:32.897 に答える