0

だから私はドロップダウンリストといくつかのチェックボックスを持っています. ドロップダウン リストは、ユーザーが 1 つのオプションのみを選択できる主要な選択肢に関連しています。チェック ボックスは、ユーザーが好きなだけ選択できる二次的な選択肢に関連していますが、ドロップダウン リストから選択したものはオプションの 1 つとして表示されません。これまでの私のコードは次のとおりです：フィドル

たとえば、ユーザーがドロップダウン リストからオプション 1 を選択した場合、オプション 2 ～ 8 のみがチェックボックスとして使用可能になります。基本的にoption1を非表示にして残りを表示したい。これが何と呼ばれているのかよくわからないので、何を検索すればよいか、どこを見ればよいかわかりませんでした。これに何らかのjqueryプラグインがあるかどうかを調べていましたが、これを行うにはどうすればよいですか? ありがとう

4

2 に答える 2

1

このデモをチェックしてください

プラグインは必要ありません。単純なjQueryで十分です。

これを試して

$('#primary').on('change', function() {
    // Show all the options initially
    $('.secondary label').show();
    // Get the currently selected option
    var selected = $(this).val();
    // Hide the label that encases the option
    $('.secondary').find('input[type="checkbox"][value="'+ selected + '"]').closest('label').hide();

}).change();​

更新されたコード

このためには、選択が変更されたときにデザインにデータを入力するために使用できるチェックボックスのテンプレートを作成する必要があります。

$('#primary').on('change', function() {
    // Clone the checkbox template
    var $template = $('.template').clone();
    var selected = $(this).val();
    // Remove the selected option from cloned object
    $template.find('input[type="checkbox"][value="'+ selected + '"]').closest('label').remove(); 

    // Append to the DropDown
    $('.secondary').html( $template.html() );

}).change();​

更新されたフィドル

于 2012-09-28T20:23:19.687 に答える
1

マイケル、これを試してみてください：

JavaScript

$(function(){
    $('#primary').on('change', function() {
        var $sec = $('.secondary'); 
        var idx = this.selectedIndex;
        $sec.find('input').attr('disabled', false).eq(idx).attr('disabled', true);
        $sec.find('label').removeClass('disabled').eq(idx).addClass('disabled');
    }).trigger('change');
});

CSS :

.disabled {
    color: gray;
}

デモ

不要なチェックボックスを非表示にするのではなく、無効にすることで、ブリーフから少し離れました。これにより、ユーザーの混乱が軽減される可能性があります。そうでない場合は、コードを非表示/表示に変更するのは非常に簡単です。

$('#primary').on('change', function() {
    $('.secondary').find('label').show().eq(this.selectedIndex).hide();
}).trigger('change');

デモ

于 2012-09-28T20:53:04.920 に答える