选择后如何删除必填属性

Question

I did an asset delivery system so there are two options for the user to select which is NOT YET DELIVERED and ALREADY DELIVERED.

I used javascript to allow date input to display if the user selects ALREADY DELIVERED. I added required for the calendar so that the user cannot submit the details if user doesn't choose a date and it worked perfectly.

However,when the user selects NOT YET DELIVERED, the system doesn't display the calendar and therefore cannot submit the form due to the calendar being required .

I wanted the calendar to be required if the user selects ALREADY DELIVERED but not for NOT YET DELIVERED.

Thank you in advance.

 $(function() { with name = 'status') $(document).on("change", "input[name='status']", function() { console.log("Testing"); var checkedValue = $(this).val(); console.log(checkedValue); else; checkedValue == 1 ? $(".box").show() : $(".box").hide(); }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="alignright"> <div> <br /> <label> <input type="radio" name="status" value="0" required /> Not yet delivered </label> <br /> <label> <input type="radio" name="status" value="1" required /> Already delivered </label> </div> </span> <span class="alignleft"> <div class="box">DELIVERY DATE<input type="date" name="deliverydate" id="deliverydate" required="" /> </div> </span> 

Answer 1

You can do it this way:

$(function() { 
  with name='status')
  $(document).on("change", "input[name='status']", function() {
    console.log("Testing");
    var checkedValue = $(this).val();
    console.log(checkedValue);

    else;

    if(checkedValue == 1) {
       $(".box").show();
       $('input#deliverydate').prop('required',true);
    } else {
       $(".box").hide();
       $('input#deliverydate').prop('required',false);
    }
  })
});

Hope it helps.

Answer 2

Instead of setting the required value on the date input, set it depending on which option the user selects. You can do this at the same time as hiding/showing it.

 $(document).on("change", "input[name='status']", function() { var checkedValue = $(this).val(); if(checkedValue == 1){ $(".box").show(); $(".box").prop("required",true); } else { $(".box").hide(); $(".box").prop("required",false); } console.log($(".box").prop("required")); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="alignright"> <div> <br /> <label> <input type="radio" name="status" value="0" required /> Not yet delivered </label> <br /> <label> <input type="radio" name="status" value="1" required /> Already delivered </label> </div> </span> <span class="alignleft"> <div class="box">DELIVERY DATE<input type="date" name="deliverydate" id="deliverydate" /> </div> </span>