У меня есть два раскрывающихся списка, когда я выбираю значение из первого раскрывающегося списка, это изменение в разрешении отключить во втором раскрывающемся списке

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 в первом раскрывающемся списке, он включает2-й выпадающий список В противном случае отключите, пожалуйста, дайте мне решение, как я могу сделать

Answer 1

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

Надеюсь, это поможет

Answer 2

Вы можете добавить / удалить отключенное свойство ко второму раскрывающемуся списку на основе выбранного значения первого раскрывающегося списка:

$('#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">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" disabled>
    <option value="">Select</option>
    <option value="1">Cash</option>
    <option value="2">Cheque</option>
 </select>
</div>