Persist javascript changes alongside Laravel 9 and Livewire 2-CodePudding

I have two select option fields--one with the ID of determined and the other vehicle_type. Determined has 4 options--2 of which should disable the options in the vehicle_type select field. In the console, I see the disabled attribute being added, but because of Livewire, is immediately removed. Any way of persisting my changes and force Livewire not to send updates to the server?

<select wire:model="determined" id="determined"
        name="determined">
    <option selected value>Please Select</option>
    <option value="0">Published HP Figure (DIN)</option>
    <option value="1">Measured with Dynojet Dyno</option>
    <option value="2">Measured with Mustang Dyno</option>
    <option value="3">Measured with Engine Dynamometer Cell</option>
</select>

<select wire:model="vehicle_type" id="vehicle_type"
        name="vehicle_type">
    <option selected value>Please Select</option>
    <option value="0">Stick shift and 2WD vehicle</option>
    <option value="1">Automatic or 4WD Drive</option>
</select>

@push('scripts')
    $(document).ready(function() {
      $('#determined').on("change", function() {
        const dis = $(this).val() == 0 || $(this).val() == 3;
        $("#vehicle_type option").prop("disabled",dis)
      });
    });
@endpush

CodePudding user response：

Use .defer on the wire:model to prevent Livewire from making an ajax request immediately and re-render the component.

<select wire:model.defer="determined" id="determined" name="determined">
    <option selected value>Please Select</option>
    <option value="0">Published HP Figure (DIN)</option>
    <option value="1">Measured with Dynojet Dyno</option>
    <option value="2">Measured with Mustang Dyno</option>
    <option value="3">Measured with Engine Dynamometer Cell</option>
</select>