CODEWITHSUNDEEP
javascripthtml
van cabrera
van cabrera

Reputation: 45

How to disable HTML required attribute when checkbox is checked?

I have this existing function: The checkbox is checked by default and when checkbox is unchecked it will show the ul section

    function toggle(className, obj) {
    	    var $input = $(obj);
    
    	    if ($input.prop('checked'))
    			$(className).hide();
    	    else $(className).show();
    	}
      <input type="checkbox" id="cb_ship" onclick="toggle('.ship', this)" checked="checked">
    
      <label for="cb_ship" >Same as account name</label>
    
     <form method="post">  
          <ul class="ship" style="display:none;">
           <li> fname <input type="text" name="fname" required></li>
           <li> lname <input type="text" name="lname" required></li>
           <li> age <input type="text" name="age" required></li>
           <li> address <input type="text" name="address" required></li>
           <li> city <input type="text" name="city" required></li>
          </ul>

           <input type="submit" value="send">
      </form>

What I want to do: If the checkbox is checked by default, all the required attributes should be disabled without clicking the checkbox. So, I can submit the form.

EDITED: Sorry for the confusion. I updated my question. The submit button must not inside the ul section. So, if checkbox is checked by default and required attributes are disabled (my problem) , I can proceed.

Upvotes: 1

Views: 4323

Answers (5)

StudioTime
StudioTime

Reputation: 23959

Much simpler way, use jquery toggle - notice I haven't used onclick - keeping js and html separate

UPDATE: take required off until it's needed, js will add it

UPDATE 2: kept required on and just looked at state of checkbox as op said

var el = $('.ship');
if ($('#cb_ship').is(":checked")) {
    el.find('input').prop({
        required: false
    });
}
$('#cb_ship').on('change', function() {

    el.toggle();

    if (el.is(":visible") == true) {
        el.find('input').prop({
            required: true
        });
    } else {
        el.find('input').prop({
            required: false
        });
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" id="cb_ship" checked="checked">

<label for="cb_ship" >Same as account name</label>

<form method="post">  
    <ul class="ship" style="display:none;">
       <li> fname <input type="text" name="fname" required></li>
       <li> lname <input type="text" name="lname" required></li>
       <li> age <input type="text" name="age" required></li>
       <li> address <input type="text" name="address" required></li>
       <li> city <input type="text" name="city" required></li>
       <li> </li>
    </ul>
    <input type="submit" value="send">
</form>

Upvotes: 1

Geeky Ninja
Geeky Ninja

Reputation: 6052

You can try this:

$(document).ready(function(){
	var checkbox = $('#cb_ship');
  checkboxStat(checkbox);
});

$('#cb_ship').click(function(){
	checkboxStat($(this));
});

function checkboxStat(checkbox) {
	if(!$(checkbox).is(':checked')) {
  	$(':input[required]:visible').prop({disabled: false});
  } else {
    $(':input[required]:visible').prop({disabled: true});
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb_ship"checked="checked">

  <label for="cb_ship" >Same as account name</label>

 <form method="post">  
      <ul class="ship">
       <li> fname <input type="text" name="fname" required></li>
       <li> lname <input type="text" name="lname" required></li>
       <li> age <input type="text" name="age" required></li>
       <li> address <input type="text" name="address" required></li>
       <li> city <input type="text" name="city" required></li>
       <li> <input type="submit" value="send"></li>
      </ul>
  </form>

Upvotes: 0

Dalip
Dalip

Reputation: 126

Below code may help to solve your problem :

JS:

function toggle(className, obj) {
   var $input = $(obj);
   if ($input.prop('checked')) {
      $(className).hide();
      $(className).attr('disabled','disabled');
      $(className).removeAttr('required');
   }
   else {
     $(className).show();
     $(className).addAttr('required');
     $(className).removeAttr('disabled');
   }
}

Upvotes: 1

Manish Jangir
Manish Jangir

Reputation: 5437

The working example of your problem:

HTML:

<input type="checkbox" id="cb_ship"checked="checked">

  <label for="cb_ship" >Same as account name</label>

 <form method="post">  
      <ul class="ship">
       <li> fname <input type="text" name="fname" required></li>
       <li> lname <input type="text" name="lname" required></li>
       <li> age <input type="text" name="age" required></li>
       <li> address <input type="text" name="address" required></li>
       <li> city <input type="text" name="city" required></li>
       <li> <input type="submit" value="send"></li>
      </ul>
  </form>

Javascript:

$(document).ready(function(){
    var checkbox = $('#cb_ship');
  checkboxStat(checkbox);
});

$('#cb_ship').click(function(){
    checkboxStat($(this));
});

function checkboxStat(checkbox) {
    if(!$(checkbox).is(':checked')) {
    $('.ship').show();
    $('.ship').find('input').prop({disabled: false});
  } else {
    $('.ship').hide();
    $('.ship').find('input').prop({disabled: true});
  }
}

See the fiddle at https://jsfiddle.net/67u62Lkq/

Upvotes: 0

Danyal Sandeelo
Danyal Sandeelo

Reputation: 12391

in JS you can do it like:

document.getElementById("field_id").required = true;

while in JQuery, you can do it like:

 $('#field_id').attr('required', true)

Upvotes: 0

Related Questions