根据另一个 select 字段中的值向一个 select 字段中的选项添加禁用属性

Question

我有两个 select 选项字段——一个 ID 为 determined，另一个 vehicle_type。 Determined 有 4 个选项--其中 2 个应该禁用 vehicle_type select 字段中的选项。我添加了一个 alert() 如果 2 个选项之一被 selected 并且脚本按预期触发，但它不会添加 disabled 属性。

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

Answer 1

这里我根据您的评论禁用所有选项

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

但为什么不直接隐藏呢？

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

根据另一个 select 字段中的值向一个 select 字段中的选项添加禁用属性

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

javascript

jquery