Checkbox: Enable button if checkbox checked

Question

In my page have a modal window, in the modal i have 2 checkboxes, i want if all checkboxes selected enabled send button and change background color (if disabled bgcolor is gray else bgcolor red). How i can it right way ?

HTML:

<form action="" method="POST" class="send-modal-data">
    <input type="text" id="send_email" name="subscribe-email" class="modal-input" placeholder="Email *" required="required">
    <div class="checkboks custom-sq vdc-cb-area">
        <input type="checkbox" id="box4" name="vdc-modal-cb" class="checked-checkbox"/>
        <label for="box4" class="checkboks-text d-flex align-center"><?php echo the_field('vdc_checkbox_txt', 'option'); ?></label>
    </div>
    <div class="checkboks custom-sq vdc-cb-area">
        <input type="checkbox" id="box7" name="vdc-modal-cb" class="checked-checkbox" />
        <label for="box7" class="checkboks-text d-flex align-center"><?php echo the_field('vdc_checkbox_text_2', 'option'); ?></label>
    </div>
    <div class="success-msg">
        <div class="msg"></div>
    </div>
    <input type="submit" name="subscribe-form" id="vdc-send-modal" class="danger-btn send-subscribe" disabled="disabled" value="<?php echo the_field('lets_get_started', 'option'); ?>"></input>
</form>

JS:

var checks = document.getElementsByName('vdc-modal-cb');
var checkBoxList = document.getElementById('vdc-cb-area');
var sendbtn = document.getElementById('vdc-send-modal');

function allTrue(nodeList) {
  for (var i = 0; i < nodeList.length; i++) {
    if (nodeList[i].checked === false) return false;
  }
  return true;
}

checkBoxList.addEventListener('click', function(event) {
  sendbtn.disabled = true;
  if (allTrue(checks)) sendbtn.disabled = false;
  console.log(123);
});

NOTE: I took this example from the stack overflow but it doesn't work for me

Have you checked your DevTools?

Ricky Stefano
– Ricky Stefano

2019-12-02 11:16:53 +00:00
Commented Dec 2, 2019 at 11:16 — Ricky Stefano
– Ricky Stefano, Commented Dec 2, 2019 at 11:16

shreyas d · Accepted Answer · 2019-12-02 11:17:31Z

1

1.You should use getElementsByClassName to get elements with the same class.

2.To add eventListener to the class elements, you should iterate over the elements.

var checks = document.getElementsByName('vdc-modal-cb');
var checkBoxList = document.getElementsByClassName('vdc-cb-area');
var sendbtn = document.getElementById('vdc-send-modal');

function allTrue(nodeList) {
  for (var i = 0; i < nodeList.length; i++) {
    if (nodeList[i].checked === false) return false;
  }
  return true;
}

for (var i = 0; i < checkBoxList.length; i++) {
  checkBoxList[i].addEventListener('click', function(event) {
    sendbtn.disabled = true;
    if (allTrue(checks)) sendbtn.disabled = false;
  });
}

edited Dec 2, 2019 at 11:17

answered Dec 2, 2019 at 11:13

shreyas d

7741 gold badge4 silver badges17 bronze badges

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

2 Comments

stepbystep Over a year ago

@shreyes Thanks for quickly feedback, thanks for code it's work, but how i can change bg color when disabled bgcolor is gray ?

Ricky Stefano Over a year ago

Use :disabled in your css. See developer.mozilla.org/en-US/docs/Web/CSS/:disabled

Collectives™ on Stack Overflow

Checkbox: Enable button if checkbox checked

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related