Home Adding a disabled attribute to options from one select field based on the value in another select field

Questions

Adding a disabled attribute to options from one select field based on the value in another select field

June 1, 2022

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. I added an alert() if one of the 2 options are selected and the script fires as it should, but it will not add the disabled attribute.

$(document).ready(function(){
    $('#determined').change(function(){
        if($(this).val() == 0 || $(this).val() == 3){
            alert('Yeah') /* This Works */
            $("#vehicle_type option[value='0']").prop('disabled',true);
        }else{
            $("#vehicle_type option[value='1']").prop('disabled',false);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

>Solution :

Here I disable all options as per your comment

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>

but why not just hide?

$(document).ready(function() {
  $('#determined').on("change", function() {
    const dis = $(this).val() == 0 || $(this).val() == 3;
    $("#vehicle_type").toggle(!dis)
  }).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>