4

編集: ユーザーが最初のセットから選択した内容に応じて、2 番目のチェックボックスのセットのみが有効になることを説明する必要がありました。ユーザーが最初のチェックボックスを選択すると、2 番目のセットの 2 番目のチェックボックスが有効になります。最初のセットの 2 番目のボックスをクリックすると、2 番目のセットの別のチェックボックス セットが有効になります。申し訳ありませんが、もっと明確に説明する必要がありました。

次のように、2 つの一連のチェックボックスがあります。

<input class="oDiv" type="checkbox" value="1" />
<input class="oDiv" type="checkbox" value="2" />

<input disabled="disabled" class="Spec" type="checkbox" value="1" />
<input disabled="disabled" class="Spec" type="checkbox" value="2" />
<input disabled="disabled" class="Spec" type="checkbox" value="5" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="8" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="10" />  
<input disabled="disabled" class="Spec" type="checkbox" value="30" />

選択に基づいてチェックボックスの 2 番目のセットを有効にする jQuery コードがあります。

$('.oDiv').on('click', function() {
var select = $(this).val();

 if(select==1){
    $('.Spec:eq(1)').prop('disabled', false);
 }
     else{$('.Spec').prop('disabled', true);}
});

ここで、ユーザーが 1 を選択すると、2 番目のリストの正しいチェックボックスが有効になりますが、ユーザーがクリックしても無効にはなりません。

jsFiddle: http://jsfiddle.net/pvSeL/

私が達成しようとしているのは、ユーザーがチェックボックスを選択すると、関連するアイテムが有効になり、チェックボックスをオフにすると無効になります。

4

4 に答える 4

4

val()チェック/選択されているかどうかに関係なく、要素から属性を1取得すると、常にコードに返されます。これを行うには、ネイティブ DOM 要素valueのプロパティを使用できます。checked

$('.oDiv').on('click', function () {
    if (this.checked) {
        $('.Spec:eq(1)').prop('disabled', false);
    } else {
        $('.Spec').prop('disabled', true);
    }
});

:checkedjQuery でセレクターを使用することもできます。

更新されたフィドル

最初のチェックボックスが 1 の場合にチェックボックスの 2 番目のセットの選択のみを有効にし、チェックボックスが 2 の場合に別のセットを有効にしたい場合、これはどのように機能しますか?

どちらかがクリックされたときに両方のチェックボックスの状態をチェックするロジックを配置する必要があります。このようなもの：

$('.oDiv').on('click', function () {
    var $checkboxes = $('.oDiv');
    $('.Spec').prop('disabled', true);

    if ($checkboxes.eq(0).prop('checked') && $checkboxes.eq(1).prop('checked')) {
        $('.Spec').eq(1).prop('disabled', false);
    }
    else if ($checkboxes.eq(0).prop('checked')){
        $('.Spec').eq(2).prop('disabled', false);
    } 
    else if ($checkboxes.eq(1).prop('checked')){
        $('.Spec').eq(3).prop('disabled', false);
    } 
});

フィドルの例

于 2013-11-06T08:14:40.770 に答える
1

チェックボックスの場合、val() は常にチェックボックスの値、つまりチェックボックスがチェックされてフォームが送信されたときに送信される値を返します。チェックボックスがチェックされているかどうかを確認するには、次を使用します

$(this).prop('checked')

また

$(this).is(':checked')

あるいは単に

this.checked

詳細と便利なトリックについては、 http://jquery-howto.blogspot.nl/2013/02/jquery-test-check-if-checkbox-checked.htmlも参照してください。

于 2013-11-06T08:14:46.703 に答える