當我選擇值表單時，我有兩個下拉列表第一個下拉它在第二個下拉列表中更改為啟用禁用

Question

在我的第一個下拉列表中，我有

 <div class="form-group row">
   <label class="col-md-4">L.R. Pay Mode</label>
   <select name="lr_pay_mode" id="lr_pay_mode">
        <option value="">Select</option>
        <option value="1">Paid</option>
        <option value="2">To Pay</option>
      </select>
  </div>

還有我的第二個下拉列表

<div class="form-group row">
 <label class="col-md-4">Mode Of Payment</label>
 <select  name="mode_of_payment" id="mode_of_payment">
    <option value="">Select</option>
    <option value="1">Cash</option>
    <option value="2">Cheque</option>
     </select>
    </div>

當我在第一個下拉列表中選擇Paid ，它啟用第二個下拉列表否則禁用請給我一些解決方案我該怎么做

Answer 1

您可以根據第一個下拉列表的選定值向第二個下拉列表添加/刪除禁用屬性：

 $('#lr_pay_mode').change(function(){ if((this).value != '1') $('#mode_of_payment').attr('disabled','disabled') else $('#mode_of_payment').removeAttr('disabled') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <label class="col-md-4">LR Pay Mode</label> <select name="lr_pay_mode" id="lr_pay_mode"> <option value="">Select</option> <option value="1">Paid</option> <option value="2">To Pay</option> </select> </div> <div class="form-group row"> <label class="col-md-4">Mode Of Payment</label> <select name="mode_of_payment" id="mode_of_payment" disabled> <option value="">Select</option> <option value="1">Cash</option> <option value="2">Cheque</option> </select> </div>

Answer 2

$('#lr_pay_mode').change(function(){
     if ($(this).val() == '1') {
      $("#mode_of_payment").prop("disabled", true);
   } else {
      $("#mode_of_payment").prop("disabled", false);  
   }
});

默認情況下禁用第二個下拉菜單

<div class="form-group row">
 <label class="col-md-4">Mode Of Payment</label>
 <select  name="mode_of_payment" id="mode_of_payment" disabled>
    <option value="">Select</option>
    <option value="1">Cash</option>
    <option value="2">Cheque</option>
 </select>
</div>

我希望它會有所幫助