CODEWITHSUNDEEP
jquery
zubair malik
zubair malik

Reputation: 223

I am trying to remove required from input field when checkbox is unchecked in jquery

I am trying to remove the required property from input field when the checkbox is unchecked but it's not working and when the checkbox is checked field should be required please help me thanks.

html view

 <div class="col-md-2">
  <input type="checkbox"  id="scheduledis"  name="checkbox[0]" class="schedule_discount"   value="" > 
  <label for=""> Schedule Discount
  </label> 
</div>
<div class="input-group">
  <input type="text" class="form-control datepicker-autoclose-1 dislay-required"  required   placeholder="Start Date"  value=""  name="start_date"  >
  <div class="input-group-append">
    <span class="input-group-text">
      <i class="md md-event-note">
      </i>
    </span>
  </div>
  <span class="text-danger">{{$errors->first('date') ?? null}}
  </span>
</div>

jquery script

   $('input[type="checkbox"]').change(function() {
//check if check if checked 
 $(this).is(':checked') ? 
 
  $('input[name=start_date]').prop('required', false) :
  $('input[name=start_date]').prop('required', true);

  $('input[name=end_date]').prop('required', false) :
  $('input[name=end_date]').prop('required', true);

  $('input[name=start_time]').prop('required', false) :
  $('input[name=start_time]').prop('required', true);

  $('input[name=end_time]').prop('required', false) :
  $('input[name=end_time]').prop('required', true);

});

Upvotes: 4

Views: 1320

Answers (2)

Vi_XKI
Vi_XKI

Reputation: 1

<label for="newmyCheck">NewCheckbox:</label> 
<input type="checkbox" id="declinecontact" onclick="mycheckfunc()">
<br><br>
<form>
NAME: <input type="text" id="Personfirstname"><br><br>
SUBMIT: <input type="submit" value="submit">
</form>
<script>
mycheckfunc();
function mycheckfunc(){

    var checkBox = document.getElementById("declinecontact");
     var firstname = document.getElementById("Personfirstname");
   
   
     if (checkBox.checked == true){
         firstname.required = false;
  
      } else {
        firstname.required = true;
    
      }
    }

Upvotes: 0

Swati
Swati

Reputation: 28522

You can simply check if the checkbox is checked then use prop('required', false) or prop('required', true) to remove or add required attribute from input box.

Demo Code :

$('input[type="checkbox"]').change(function() {
  //check if check if checked 
  $(this).is(':checked') ?
    $('input.dislay-required').prop('required', false) :
    $('input.dislay-required').prop('required', true);

});
:required {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <input type="checkbox" id="scheduledis" name="checkbox[0]" class="schedule_discount" value="">
  <label for=""> Schedule Discount
  </label>
</div>
<div class="input-group">
  <input type="text" class="form-control datepicker-autoclose-1 dislay-required" required placeholder="Start Date" value="" name="start_date">
  <input type="text" class="form-control datepicker-autoclose-1 dislay-required" required placeholder="End Date" value="" name="end_date">
  <div class="input-group-append">
    <span class="input-group-text">
      <i class="md md-event-note">
      </i>
    </span>
  </div>

</div>

Upvotes: 2

Related Questions