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