javascript - 当选择 optgroup 中的选项之一时如何禁用未选择的选项

Question

我有一个表单组，其中有 3 个选择表单:商家、订单状态和订单付款状态。注重商户选择。我有这样的选择选项。

<select id="merchant_uuid" name="merchant_uuid" class="form-control" data-plugin-selectTwo>
    <option value="">All</option>
    <optgroup label="Brands">
    <?php
        if (isset($merchants)) {
           foreach ($merchants as $merchant) {
                echo '<option value='.$merchant['merchant_uuid'].'>'.$merchant['merchant_name'].'</option>';
           }
        }
    ?>
    </optgroup>
</select>

当我单击“All then”选项时，我的期望是禁用 optgroup 作为父级的选项，并在其他选择中保留启用的 optgroup。

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

上面的示例代码仍然错误，当我单击“全部”时，所有选项 optgroup 在所有表单组中都被禁用。任何人都可以帮助我。

Answer 1

在您的 JavaScript 代码中发现以下错误...

1. 与元素 ID 一起使用的选择器应从 # 开始。

2. 对于获取，如果选择元素有正确的 DOM 位置，则选项是跟踪，即 children() 或链选择器。

检查以下内容是否适合您。

$('#merchant_uuid').on('change', function() {

    if (this.value == '') {
        $('#merchant_uuid optgroup option').prop('disabled', true);
        $('#merchant_uuid optgroup option:selected').prop('disabled', false);
    } else {
        $('#merchant_uuid optgroup option').prop('disabled', false);
    }
});

Note: if you don't want to enable the currently selected option then you can remove the second line of if statement.