jquery-ui - 如何使用 jquery 启用/禁用选择框中的选项

Question

我有一个选择框，其中包含使用 php 动态生成的选项和 optgroup。现在，当我选择“ALL”所有其他 optgroup 时，选项应该是已禁用，当我选择“全部”以外的任何选项时，“全部”选项应被禁用

<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>

我怎样才能让它工作？

Answer 1

这是一件奇怪的事情，但这里的代码可以满足您的要求。

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

实例 - http://jsfiddle.net/NpNFh/