How to disable HTML required attribute when checkbox is checked?

Question

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.

StudioTime · Accepted Answer · 2016-09-06 09:37:02Z

1

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>

edited Sep 6, 2016 at 9:37

answered Sep 6, 2016 at 7:21

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

StudioTime Over a year ago

Yeah I saw that but the submit is hidden when the form is hidden so not sure how it's relevant

Rayon Over a year ago

Kind of funny thing but may be OP could not proceed with the next form or step if earlier for fields are required...

van cabrera Over a year ago

@DarrenSweeney sorry for confusion. i updated my question. The submit btn must not belong inside the ul section.

StudioTime Over a year ago

@vancabrera Updated my answer - does as you want now I think

Dalip · Accepted Answer · 2016-09-06 07:32:05Z

1

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');
   }
}

answered Sep 6, 2016 at 7:32

Dalip

1261 silver badge9 bronze badges

2 Comments

van cabrera Over a year ago

It needs to disable all the required fields without clicking the checkbox because the checkbox is checked by default. So, I can submit the form.

Dalip Over a year ago

You can add 'disabled' in input tags Like this : <input type="text" name="fname" disabled >

Danyal Sandeelo · Accepted Answer · 2016-09-06 07:18:42Z

0

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)

answered Sep 6, 2016 at 7:18

Danyal Sandeelo

12.4k10 gold badges57 silver badges90 bronze badges

Comments

Manish Jangir · Accepted Answer · 2016-09-06 07:26:52Z

0

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/

answered Sep 6, 2016 at 7:26

Manish Jangir

5,4576 gold badges49 silver badges79 bronze badges

1 Comment

van cabrera Over a year ago

It needs to disable all the required fields without clicking the checkbox because the checkbox is checked by default. I updated my code the button must not inside the ul section. So, I can submit the form if the required attributes are disabled at first.

Geeky Ninja · Accepted Answer · 2016-09-06 07:41:17Z

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>

Collectives™ on Stack Overflow

How to disable HTML required attribute when checkbox is checked?

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related