1

これらのいずれかがチェックされているときにチェックボックスのセットを非表示にし、チェックされていないときにそれらを再表示しようとしています。条件はその値に基づいている必要があります。

var input = document.getElementsByTagName("input");

for(i=0;i<input.length;i++){


input[i].onchange = function(){
    if(this.checked){
var value = $(this).val();
$("input[type=checkbox]:not(." + '60' + ")").hide();
$("input[type=checkbox]." + '60').show();
}
  }
     }

非表示にするチェックボックスのグループは、値 60 と 90 に属します (2 つの腕のアクセサリーは選択できません)。2 つのチェックボックスは 1 つだけ選択できます。 'チェックされており、チェックを外すと再び表示されます。

        <input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
        <input type="checkbox" value="60" /> <a>T-arms 2 $60</a><br/>
        <input type="checkbox" value="90" /> <a>T-arms 1 $90</a><br/>
        <input type="checkbox" value="80" /> metal rails $80<br/>
        <input type="checkbox" value="30" /> plastic rails $30<br/>
        <input type="checkbox" value="70" /> foot rest ring $70<br/>
        <input type="checkbox" value="120" />plastic five star foot $120 <br/>

これが私のフィドルです：JSフィドル

4

2 に答える 2

2

次のjQueryをお勧めします。

$('.arms').change(
    function(){
        $('.arms').not(this).prop('disabled',this.checked);
    });

修正された HTML と組み合わせると、次のようになります。

<input id="check1" type="checkbox" value="50" />
<label for="check1">conductive plastic foot cup $50</label>
<input id="check2" type="checkbox" value="60" class="arms" />
<label for="check2">T-arms 2 $60</label>
<input id="check3" type="checkbox" value="90" class="arms" />
<label for="check3">T-arms 1 $90</label>
<input id="check4" type="checkbox" value="80" />
<label for="check4">metal rails $80</label>
<input id="check5" type="checkbox" value="30" />
<label for="check5">plastic rails $30</label>
<input id="check6" type="checkbox" value="70" />
<label for="check6">foot rest ring $70</label>
<input id="check7" type="checkbox" value="120" />
<label for="check7">plastic five star foot $120</label>

JS フィドルのデモ。

上記では、label要素をfor属性 (またはプロパティ) とともに使用して、テキストを関連する .xml に明示的に関連付けていますcheckbox。

相互に排他的な sに、チェックされているかどうかに応じて、他の要素 (またはさらに相互に排他的を追加する場合は要素)のclassプロパティをinput設定するセレクターでそれらを簡単にターゲットにするために、を追加しました。 、要素がチェックされているかチェックされていません。disabledcheckboxes

ちなみに、通常は、フォーム フィールドを削除/非表示にするよりも、無効にする方が適切です。これにより、ユーザーが誤ってクリックした場合に、他のオプションがどこに行ったのか疑問に思ったり、突然再び表示されて驚いたりすることがなくなります。

ただし、「他の」要素を本当に表示/非表示にしたい場合は、次を使用できます。

$('.arms').change(
    function(){
        $('.arms').not(this).add($(this).next())[this.checked ? 'hide' : 'show']();
    });

JS フィドルのデモ。

または、次の CSS で最初のアプローチ ( を使用) を使用することもできます(疑似セレクターprop('disabled',this.checked)を実装する準拠ブラウザーでは::disabled

input:disabled,
input:disabled + label {
    display: none;
}

JS フィドルのデモ。

参考文献:

于 2013-02-04T14:27:33.913 に答える
1

data私はそのような種類のものに属性を使用するのが大好きです:

HTML

<input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
<input type="checkbox" value="60" data-exclude="input[value=90]" /> T-arms 2 $60<br/>
<input type="checkbox" value="90" data-exclude="input[value=60]" /> T-arms 1 $90<br/>
<input type="checkbox" value="80" /> metal rails $80<br/>
<input type="checkbox" value="30" /> plastic rails $30<br/>
<input type="checkbox" value="70" /> foot rest ring $70<br/>
<input type="checkbox" value="120" />plastic five star foot $120 <br/>

JavaScript

var input = document.getElementsByTagName("input");

$('input').each(function() {
    var $input = $(this);
    $input.change(function() {
        var $exclude = $($input.data('exclude'));
        $exclude.toggle(! $input.is(':checked'));
    });
});

ライブデモ

http://jsfiddle.net/bikeshedder/2H5kB/10/

ところで。チェックボックスを非表示にするよりも無効にしたいです。

于 2013-02-04T14:26:05.173 に答える