根據另一個選擇欄位中的值向一個選擇欄位中的選項添加禁用屬性

我有兩個選擇選項欄位——一個帶有 ID，另一個determined帶有vehicle_type. 確定有 4 個選項——其中 2 個應該禁用 vehicle_type 選擇欄位中的選項。我添加了一個alert()如果選擇了 2 個選項之一并且腳本按其應觸發的方式觸發，但它不會添加該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>

uj5u.com熱心網友回復：

在這里，我根據您的評論禁用所有選項

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

標籤：javascript jQuery

上一篇：全屏選單打開時頁面跳轉到頂部

下一篇：在回圈中2秒后添加類并在7秒后洗掉