CODEWITHSUNDEEP
javascriptjqueryselectjquery-select2optgroup
Axaxaxaxax
Axaxaxaxax

Reputation: 69

How to disable unselected option when one of option in optgroup is selected

I have form group which is there are 3 select form : Merchant, Order Status, and Order Payment Status. Focus on Merchant selection. I have select option like this.

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

My expectation when I click option All then option that optgroup as parent is disabled and keep enabled optgroup in other selects.

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

The sample code above still wrong, when I clicked All then all option optgroup was disabled in all form group. Anyone can help me please.

Upvotes: 0

Views: 875

Answers (1)

A.D.
A.D.

Reputation: 2372

In your JavaScript code following errors are found...

  1. The selector used with element ID should start from #.

  2. For fetch, the option if select element there a proper DOM position is track ie children() or chain selector.

check the following may this work for you.

$('#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.

Upvotes: 1

Related Questions