Enable both submit button on checkbox click

Question

I used two forms in a single page but when I click on checkbox then both submit buttons are active but both are different.

I want to click on form one checkbox then the only form one submit button active and then I click on form two checkbox then the only form two submit button active.

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

<h1>form one</h1>
<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>
<h1>form two</h1>
<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>

wscourge · Accepted Answer · 2019-01-11 08:30:37Z

1

You can do that searching relatively for submit button and enabling only the closest one you find:

var checkboxes = $('input[type="checkbox"]');
checkboxes.on('click', function(e) {
  $(this).closest('form')
         .find('input[type="submit"]')
         .prop("disabled", !$(this).is(":checked"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
    <div>
        <input type="checkbox" name="option-0" id="option-0"> <label for="option-0">Option 0</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>
<h1>form two</h1>
<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
 
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>

edited Jan 11, 2019 at 8:30

answered Oct 27, 2016 at 12:15

wscourge

11.4k17 gold badges65 silver badges87 bronze badges

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

Comments

David Thomas · Accepted Answer · 2019-01-11 08:23:16Z

The easiest way is to simply find the the submit <input> elements within the same <form> ancestor:

$('input[type=checkbox]').on('change', function(){
  $(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});

$('input[type=checkbox]').on('change', function() {
  $(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
  <div>
    <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
  </div>

  <div>
    <input type="submit" value="Do thing" disabled>
  </div>
</form>
<h1>form two</h1>
<form>
  <div>
    <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 1</label>
  </div>

  <div>
    <input type="submit" value="Do thing" disabled>
  </div>
</form>

Note that, in your HTML, I also corrected the duplicated id of the two <input> elements (and changed the name properties also).

Collectives™ on Stack Overflow

Enable both submit button on checkbox click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related