, wie erforderlich deaktivieren auf selcted cancel

Question

ich habe zwei dropdown ein für ausgewählte Räume und wählen Sie Buchung stornieren ..

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

jetzt ich die Buchung stornieren möchten, indem Sie stornieren und einreichen, aber probelm ist es zuerst wählen erforderlich ist, ich will nur in confirm erforderlich, wie ich das diese

Answer 1

tun können versuchen:

hinzufügen select-room und booking-status Klasse in 2 selectbox, so dass es Ereignis erkennen. weil Sie denselben ID-Status in 2 selectbox haben. Bitte setze eine eindeutige ID für jedes Element in HTML.

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

Bitte achten Sie darauf, dass id in einer HTML-Seite sollte eindeutig sein. Sie haben anscheinend die gleiche ID für diese beiden Auswahlfelder verwendet.

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

verwenden nun die jQuery-Code:

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

Siehe diese Fiddle JS: https://jsfiddle.net/gx0s27s9/