How to required selection option user checked radio button Yes and removed required if checked on No In jQuery or Javascript before submitting form

Question

I am trying to validate this before submitting kindly help me.

MY HTML

<div class="form-group">
  <label class="control-label col-md-3">VAT Register</label>
  <div class="col-md-6">
    <div class="input-group">
      <div class="icheck-inline">
        <label>
          <input type="radio" value="Yes" name="vat_register" id="vatRegYes" class="icheck">
          Yes </label>
        <label>
          <input type="radio" value="No" name="vat_register" id="vatRegNo" checked class="icheck">
          No </label>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-md-3">VAT Number</label>
  <div class="col-md-6">
    <input type="text" name="vat_number"  class="form-control" />
  </div>
</div>
<div class="form-group">
  <label class="control-label col-md-3">VAT Quarters</label>
  <div class="col-md-6">
    <select name="vat_quarters" id="vatQuar" class="form-control select2me">
      <option value="">-- Choose --</option>
      <option value="Jan - April - July - October" >Jan - April - July - October</option>
      <option value="Feb - May - August - November" >Feb - May - August - November</option>
      <option value="March - June - September - December" >March - June - September - December</option>
    </select>
  </div>
</div>

I tried this

<script type="text/javascript">

        $(document).ready(function(){

            $('#vatRegYes').click(function(){

                if($(this).prop("checked") == true){

                    //alert("Checkbox is checked.");
                    $('#vatQuar').attr("required", "true");

                }

                else if($(this).prop("checked") == false){

                    //alert("Checkbox is unchecked.");
                    $('#vatQuar').removeAttr('required');

                }

            });

        });

    </script>

This is working fine but only for Yes mean when i checked yes Vat Quarters set as required but when i again checked not Vat Quarters Still remain required. i only want required when yes is checked.

score 2 · Accepted Answer · edited May 23 '17 at 12:03

As required is a property, You should use .prop() instead of .attr(), I would recommend to use change event instead of click for radio group and also the code can be reduced to following.

A good read .prop() vs .attr()

 $(document).ready(function() {
   $('[name="vat_register"]').change(function() {
     $('#vatQuar').prop("required", $('#vatRegYes').prop("checked"));
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icheck-inline">
  <label>
    <input type="radio" value="Yes" name="vat_register" id="vatRegYes" class="icheck">Yes</label>
  <label>
    <input type="radio" value="No" name="vat_register" id="vatRegNo" checked class="icheck">No</label>
</div>
<div>
  <select name="vat_quarters" id="vatQuar" class="form-control select2me">
    <option value="">-- Choose --</option>
    <option value="Jan - April - July - October">Jan - April - July - October</option>
    <option value="Feb - May - August - November">Feb - May - August - November</option>
    <option value="March - June - September - December">March - June - September - December</option>
  </select>
</div>

this is not working for me can you please show me demo ? – Muddasir Abbas Oct 15 '15 at 10:19 — Muddasir Abbas, Oct 15 '15 at 10:19
@MuddasirAbbas, Updated answer you can inspect element – Satpal Oct 15 '15 at 10:23 — Satpal, Oct 15 '15 at 10:23

score 0 · Answer 2 · answered Oct 15 '15 at 09:51

required is a boolean html attribute. So you must use prop.

if($(this).prop("checked") == true){

    //alert("Checkbox is checked.");
    $('#vatQuar').prop("required", "true");

}

else if($(this).prop("checked") == false){

    //alert("Checkbox is unchecked.");
    $('#vatQuar').prop('required', false);

}

And you have to listen the click event on a parent of your two radios input.

Like this :

$('.input-group').click(function(){
    var value = $('#vatRegYes').prop('checked');

    if(value == true){

        //alert("Checkbox is checked.");
        $('#vatQuar').prop("required", "true");

    }

    else if(value == false){

        //alert("Checkbox is unchecked.");
        $('#vatQuar').prop('required', false);

    }
});

As suggested by Satpal; you can also use the change event. Both methods will works.

How to required selection option user checked radio button Yes and removed required if checked on No In jQuery or Javascript before submitting form

2 Answers2