CODEWITHSUNDEEP
javascriptjquerycheckbox
Jiang Lan
Jiang Lan

Reputation: 171

if checkbox is checked remove required

The user has to select at least one checkbox, once a checkbox is checked, I want to remove required from all the checkbox, then if the user unselect, none of the checkbox is checked, reput required on them.
My code is not working. I found lots of similar answers here but none of them works for me, so I ask this question again.

Here is jsFiddle

var checkbox_required = $('input[type="checkbox"]');

checkbox_required.prop('required', true);

if (checkbox_required.is(':checked'))
{
	checkbox_required.prop('required', false);
}
else
{
	checkbox_required.prop('required', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="奢侈品与配饰">奢侈品与配饰
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="女士时尚">女士时尚
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="男士时尚">男士时尚
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="美妆与护肤">美妆与护肤
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="儿童">儿童
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="内衣">内衣
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="家居">家居
  </label>
  <input type="submit" value="submit">
</form>

Upvotes: 2

Views: 2954

Answers (4)

Shakeel Ahmad
Shakeel Ahmad

Reputation: 349

If you have multiple groups with different names then this solution work perfect Note: Add the uncheck validations

  $(document).on('change', 'input[type=checkbox]',function (e) {
      var inputname = $(this).attr('name');
      $("input[name='"+inputname+"']").prop('required', false);  
  });

Upvotes: 0

Hello Hack
Hello Hack

Reputation: 109

var checkbox_required = $('input[type="checkbox"]');

checkbox_required.attr('required', true);

checkbox_required.on('click', function(){
    if (checkbox_required.is(':checked')) {
        checkbox_required.attr('required', false);
    } else {
        checkbox_required.attr('required', true);
    }
});

Upvotes: 0

Shawn Mulligan
Shawn Mulligan

Reputation: 109

Just out of curiosity, I know this is an old thread but how would you do it if you have 2 different sets of check boxes and you need to remove the required only if a checkbox is selected for each set.

<form>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="blah"
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="blah blah"
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_color[]" value="red"
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_color[]" value="green"
  </label>
    <input type="submit" value="submit">
</form>

Just keeping the form simple. So 2 sets of checkboxes one set for type and one set for color. The code supplied would make either all of them required or all of them not required. How would one adapt this code so that way it only affects each set as it's own?

For example if they select type but not color, it would remove required on type but keep required on color and vice versa?

Upvotes: 0

caramba
caramba

Reputation: 22480

All you forgot is to add the on('click', ... event handler https://jsfiddle.net/nba_jl/k94stpby/12/

var checkbox_required = $('input[type="checkbox"]');

checkbox_required.prop('required', true);

checkbox_required.on('click', function(){
    if (checkbox_required.is(':checked')) {
        checkbox_required.prop('required', false);
    } else {
        checkbox_required.prop('required', true);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="奢侈品与配饰">奢侈品与配饰
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="女士时尚">女士时尚
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="男士时尚">男士时尚
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="美妆与护肤">美妆与护肤
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="儿童">儿童
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="内衣">内衣
  </label>
  <label class="produit_type">
    <input type="checkbox" name="produit_type[]" value="家居">家居
  </label>
  <input type="submit" value="submit">
</form>

Upvotes: 2

Related Questions