如何禁用需要在取消selcted

Question

我有兩個選擇下拉一個選定的房間，並選擇取消預訂..

<div>Confirm:</div> 
    <div> 
     <select id="status" name="status" class="form-control" required> 
      <option value="1">room2</option> 
      <option value="2">rrom2</option> 
     </select> 
    </div> 

<div>Status:</div> 
    <div> 
     <select id="status" name="status" class="form-control" > 
      <option value="1">Confirm booking</option> 
      <option value="2">Cancel booking</option> 
     </select> 
    </div> 

現在我想通過選擇取消並提交訂單取消，但萬阿英，蔣達清有第一選擇是必需的，我想只需要在確認，我怎麼能做到這一點

Answer 1

試試這個：

添加select-room和booking-status類2選擇框，這樣檢測出來的事件。因爲您在2選擇框中具有相同的ID狀態。請爲html中的每個元素設置唯一的ID。

$(".booking-status").change(function(){ // use change event for select box of booking 
 
    if($(this).val() == "2") { 
 
    $(".select-room").removeAttr("required"); 
 
    } else { 
 
    $(".select-room").attr("required","required"); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div>Confirm:</div> 
 
    <div> 
 
     <select id="status1" name="status" class="form-control select-room" required> 
 
      <option value="1">room2</option> 
 
      <option value="2">rrom2</option> 
 
     </select> 
 
    </div> 
 

 
<div>Status:</div> 
 
    <div> 
 
     <select id="status2" name="status" class="form-control booking-status" > 
 
      <option value="1">Confirm booking</option> 
 
      <option value="2">Cancel booking</option> 
 
     </select> 
 
    </div>

Answer 2

請確保ID應該是在HTML頁面中是獨一無二的。您似乎對這兩個選擇框使用了相同的ID。

<div>Confirm:</div> 
<div> 
    <select id="room" name="room" class="form-control" required> 
     <option value="1">room2</option> 
     <option value="2">rrom2</option> 
    </select> 
</div> 

<div>Status:</div> 
<div> 
    <select id="status" name="status" class="form-control" > 
     <option value="1">Confirm booking</option> 
     <option value="2">Cancel booking</option> 
    </select> 
</div> 

現在使用jQuery代碼：

$(function(){ 
    $("#status").on("change", function(){ 
    if($(this).val() == 2) { 
     $("#room").attr("required", false); 
    } else { 
     $("#room").attr("required", true); 
    } 
    }); 
}); 

參考這個JS小提琴：https://jsfiddle.net/gx0s27s9/