Enable/disable button based on accepting the 2 checkbox conditions

Question

I have gone through the stackoverflow regarding enable/disable button conditionally and was able to find some help but NOT EXACT what I was looking for.

Instead of 1 checkbox condition, I have 2 checkbox conditions. So unless if the two checkboxes have been accepted, the button should not be enabled.

Following is my html:

<input type="checkbox" id="f_agree" value="1" onchange="checked(this, 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checked('f_agree', this)"/>

<button type="submit" disabled="disabled" id="acceptbtn">Continue</button>

Following is javascript:

function checked(element1, element2) {
    var myLayer = document.getElementById('acceptbtn');

   if (element1.checked == true && element2.checked == true) {
        myLayer.class = "submit";
        myLayer.disabled = "";
   } else {
        myLayer.class = "button:disabled";
        myLayer.disabled = "disabled";
   };
}

I have tried like above, but it is not working. I don't know where I am going wrong.

Jenish Rabadiya · Accepted Answer · 2015-02-26T06:29:47.303

it won't work because you are not removing that attribute disabled.

function checked(element1, element2) {
    var myLayer = document.getElementById('acceptbtn');

   if (element1.checked == true && element2.checked == true) {
        myLayer.class = "submit";
        myLayer.removeAttribute("disabled");
   } else {
        myLayer.class = "button:disabled";
        myLayer.setAttribute("disabled","disabled");
   };
}

Update

use any other name then checked as it seems to be reserved and not working.
you also need to do getElementById for element1 and element2.

function checkedFunc(element1Id, element2Id) {
  
    var myLayer = document.getElementById('acceptbtn');
    var element1 = document.getElementById(element1Id);
    var element2 = document.getElementById(element2Id);
   if (element1.checked == true && element2.checked == true) {
        myLayer.class = "submit";
        myLayer.removeAttribute("disabled");
   } else {
        myLayer.class = "button:disabled";
        myLayer.setAttribute("disabled","disabled");
   };
}

<input type="checkbox" id="f_agree" value="1" onchange="checkedFunc('f_agree', 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checkedFunc('f_agree','f_agree2')"/>

<input type="button" value="check" id="acceptbtn" />

No error but it is not doing anything. I mean it is NOT enabling the button. — Dee, Feb 26 '15 at 06:19
I think there should be some problem in passing the variables? — Dee, Feb 26 '15 at 06:19
@MissMintox Finally got the issue rename function to `checked` to `checkedFunc`. Checked seems to be reserved... — Jenish Rabadiya, Feb 26 '15 at 06:27

score 0 · Answer 2 · answered Feb 26 '15 at 06:15

0

You can try the following code

if (element1.checked == true && element2.checked == true) {
    myLayer.class = "submit";
    myLayer.removeAttribute("disabled");
} else {
    myLayer.class = "button:disabled";
    myLayer.setAttribute("disabled", "disabled");
};

answered Feb 26 '15 at 06:15

Sandeeproop

1,756
1
12
18

I think there should be some problem in passing the variables? – Dee Feb 26 '15 at 06:20

score 0 · Answer 3 · answered Feb 26 '15 at 06:24

With jQuery:

var btn;

var changed = function() {
  //get the length of non checked boxes
  var disbl = $('input[id^=f_agree]:not(:checked)').length;
  btn.prop('disabled', disbl);//disable if true, else enable
};


$(function() {
  btn = $('#acceptbtn');
  $('input[id^=f_agree]').on('change', changed).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="f_agree" value="1" />1
<input type="checkbox" id="f_agree2" value="1" />2
<input type="button" id="acceptbtn" value="Submit" />

score 0 · Answer 4 · answered Feb 26 '15 at 06:27

The problem is that there is a difference between the string "f_agree" and the node with id="f_agree".

Your code should work as expected with

checked(this, document.getObjectById('f_agree2'))

Much better would be however to avoid having a widget knowing about the other... I'd implement instead by adding a list of external rules that check all widgets:

function okSubmit() {
    return (document.getElementById("f_agree").checked &&
            document.getElementById("f_agree2").checked);
}

This is much easier to read/maintain and also scales better in case you need to add more conditions later. In the onchange of all the widgets just call a function that will enable/disable the submit button depending on the conditions.

score 0 · Answer 5 · answered Feb 26 '15 at 06:34

0

Try this

 if (element1.checked == true && element2.checked == true) {
    myLayer.class = "submit";
    myLayer.removeAttribute("disabled");
} else {
    myLayer.class = "button:disabled";
    myLayer.setAttribute("disabled", "disabled");
};

answered Feb 26 '15 at 06:34

varad mayee

619
7
19

score 0 · Answer 6 · edited Feb 26 '15 at 07:32

Try the below code -

var  chk1 = document.getElementById('chk1');

chk1.addEventListener('click', checked, false);

var  chk2 = document.getElementById('chk2');

chk2.addEventListener('click', checked, false);

function checked(){

if(chk1.checked && chk2.checked) {
  document.getElementById('btn').removeAttribute('disabled');
} else {
  document.getElementById('btn').setAttribute('disabled','disabled');
}

}

 <input type="checkbox" id="chk1" />
 <input type="checkbox" id="chk2"  />
 <button id="btn" disabled >Button<button>

I tested it and it's working! Hope it helps u...

Enable/disable button based on accepting the 2 checkbox conditions

6 Answers6