web-dev-qa-db-ja.com

jqueryを使用してセレクトボックスのオプションを有効/無効にする方法

私はphpを使用して動的に生成されるオプションとoptgroupを含む選択ボックスを持っています。今、他のすべてのoptgroupをすべて選択すると、オプションが無効になり、オプションを選択したときに「ALL」以外の「ALL」オプションは無効にする必要があります

<select name="select1" id ="select1" onchange="handleSelect()">
    <option value ="-1">ALL</option>
    <optgroup label="CARS">
        <option value="ford">FORD</option>
        <option value="Nissan">Nissan</option>
    </optgroup>
</select>
<script>
    function handleSelect() {
        var selectVal = $("#select1:selected").text();
        if (selectVal == "ALL") {
            // cannot disable all the options in select box
            $("#select1  option").attr("disabled", "disabled");
        }
        else {
            $("#select1 option[value='-1']").attr('disabled', 'disabled');
            $("#select1 option").attr('disabled', '');
        }
    }
</script>

これをどのように機能させることができますか？

jquery-uijqueryjquery-selectors
12
Someone

これは奇妙なことですが、要件を満たすコードを次に示します。

$('select').on('change', function() {
    if (this.value == '-1') {
        $('optgroup option').prop('disabled', true);
    } else {
        $('optgroup option').prop('disabled', false);
    }
});

実際の例- http://jsfiddle.net/NpNFh/

21
TJ VanToll

次のコードを使用できます。次の3つの選択ボックスがあるとしましょう。

<select class="sel_box" id="sel_1" onchange="disable_sel(this.value);" ></select>
<select class="sel_box" id="sel_2" onchange="disable_sel(this.value);" ></select>
<select class="sel_box" id="sel_3" onchange="disable_sel(this.value);" ></select>

そして関数では 'opt'が引数になり、次を使用します

$('.sel_box option[value="'+opt+'"]').attr("disabled", true);
8
user2511671

ターゲットとするHTMLのバージョンに応じて、disabled属性の構文に2つのバリエーションを使用できます。

HTML4: <option value="spider" disabled>Spider</option>
XHTML: <option value="spider" disabled="disabled">Spider</option>
0
Gaurav