Javascript 如果下拉列表的值包含“未付”，则其他下拉列表将自动为只读

我想做的是，当下拉列表paymentstatus的值为“未支付”时，其他两个下拉列表将不会自动单击。我的代码正在工作，只是因为我使用onclick，所以我需要单击下拉菜单才能使代码工作。有没有其他方法不必单击下拉列表

<div class="row">
                <div class="col-md-3">
                 <label>Order Status</label>
                     <?php
                        require '../includes/db.php';
                        $sql = $connection->prepare("SELECT * FROM orderstatus");
                        $sql->execute();
                        $data = $sql->fetchAll();
                        echo "<select name='orderstatusid' id='orderstatusid' class='form-control orderstatusid' required>";
                        foreach($data as $row):
                            echo "<option class='dropdown' value='{$row['orderstatusid']}'>".htmlspecialchars($row["description"])."</option>";
                        endforeach;
                        echo "</select>";
                     ?>
                     <br />
                </div> 
                <div class="col-md-3">
                 <label>Payment Status</label>
                     <?php
                        require '../includes/db.php';
                        $sql = $connection->prepare("SELECT * FROM paymentstatus");
                        $sql->execute();
                        $data = $sql->fetchAll();
                        echo "<select name='paymentstatusid' id='paymentstatusid' class='form-control paymentstatusid' onchange='disableotherdropdown()' required>";
                        foreach($data as $row):
                            echo "<option class='dropdown' value='{$row['paymentstatusid']}'>".htmlspecialchars($row["description"])."</option>";
                        endforeach;
                        echo "</select>";
                     ?> <br />
                </div>
                <div class="col-md-6">
                 <label>Date of Payment</label>
                 <input type="date" name="paiddate" id="paiddate" class="form-control paiddate" required/>
                 <br />
                </div>
             </div>



    <script>
       function disableotherdropdown() {
            var val = $(".paymentstatusid").val();
            if (val != '1') {
                $('.paiddate').css('border-color', 'red');
                $('.orderstatusid').attr("readonly", false); 
                $('.paiddate').attr("readonly", false);
            } else {
                $('.orderstatusid').attr("readonly", true); 
                $('.paiddate').attr("readonly", true);
                $('.paiddate').css('border-color', '#ccc');
            }

       }

    </script>

订单状态

$（文档）.ready（函数（）{
$（“#paymentstatusid”）.change（函数（）
{disableotherdropdown（）}）；
函数disableotherdropdown（）{
var val=$（“#paymentstatusid”）.val（）；
警报（val）
如果（val！=1）{
警报（“a”）；
$（'#orderstatusid'）.attr（“禁用”，false）；
}否则{
警报（“b”）；
$（'#orderstatusid'）.attr（“disabled”，true）；
}
}
});
啊
支付
不付报酬的
A.
B

更改

只读以禁用works
$（'#orderstatusid'）.attr（“disabled”，true）
 

$（文档）.ready（函数（）{
$（“#paymentstatusid”）.change（函数（）
{disableotherdropdown（）}）；
函数disableotherdropdown（）{
var val=$（“#paymentstatusid”）.val（）；
警报（val）
如果（val！=1）{
警报（“a”）；
$（'#orderstatusid'）.attr（“禁用”，false）；
}否则{
警报（“b”）；
$（'#orderstatusid'）.attr（“disabled”，true）；
}
}
});
啊
支付
不付报酬的
A.
B

更改

只读以禁用works
$（'#orderstatusid'）.attr（“disabled”，true）
 这些
是否可由用户编辑？我认为这是不可能的，只读意味着用户不能编辑文本。我相信您想要
$（'select'）。prop（'disabled'，true）
可能是这是Dom加载问题窗口。onload=disableotherdropdown（）您第一次尝试过此窗口。load检查而不单击请求禁用其他字段。将默认值设置为空，并尝试在之前为每个设置paymentstatusloop@gowthamrajan我尝试了window.onload=disableotherdropdown（），但当paymentstatus已支付时，它不会读取代码：
if（val！=“1”）{$（'.paiddate'）.css（'border-color'，'red'）；$（'.orderstatusid'）.attr（“readonly”，false）；$（'.paiddate'）.attr（“readonly”，false）；
val=1是未付的val=2这些
可以由用户编辑吗？我认为这是不可能的，readonly意味着用户无法编辑其文本。我相信您想要
$（'select'）.prop（'disabled'，true）
可能是这是Dom加载问题窗口。onload=disableotherdropdown（）您是否尝试过此窗口。首次加载以检查而不单击请求以禁用其他字段。请将默认值设置为空，并在每次加载之前尝试paymentstatusloop@gowthamrajan我尝试了window.onload=disableotherdropdown（）但是，当paymentstatus已支付时，它不会读取代码：
如果（val！=“1”）{$（“.paiddate”）.css（'border-color'，'red'）；$（'orderstatusid'）.attr（“readonly”，false）；$（'.paiddate'）.attr（“readonly”，false）；
val=1未支付，val=2已支付
<script>
 $(document).ready(function(){ 
 $("#paymentstatusid").change(function() 
 {disableotherdropdown()});
 function disableotherdropdown(){
 var val =$("#paymentstatusid").val();
          alert(val)
          if (val !=1) {
             alert('a');
              $('#orderstatusid').attr("disabled",false); 
          } else {
            alert('b');  
       $('#orderstatusid').attr("disabled", true); 
    }
    }
   });
  </script>
  <body>
    <select id='paymentstatusid'>
     <option selected val='0'>hhh</option>
      <option value='1'>paid</option>
     <option value='2'>unpaid</option>
    </select>
   <select id='orderstatusid'>
     <option selected="selected" val='0' >&nbsp;</option>
     <option val='1'>a</option>
     <option val='2'>b</option>
  </select>
  </body>