Enabling or Disabling Buttons Based on CheckBox

Question

I had an I Agree Checkbox that when checked or unchecked it used JS to toggle the Disabled setting on a button with id="submit1". However, I added more buttons and now it needs to toggle all of these buttons rather than just the first, so the ID isn't working anymore.

Current Code for checkbox:

 <input type="checkbox" checked id="agree" name="agree" value="ON" onclick="javascript: if(document.getElementById('agree').checked==true){document.getElementByID('submit1').disabled=false;}else{document.getElementByID('submit1').disabled=true;}">

And for button:

 <button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>

So, I have added more buttons, so I need 2 things:

I need JS or jquery that will loop through and toggle EACH button when the box is checked rather that just the single button (first button with the ID).
1. On page load, I also need it to check and see if the box is checked and if not, loop through and disable all of those buttons.

Thanks so much for any help you can give!!

Craig

Thanks everyone for your help and answers!!! Shahe's answer was ideal for my situation. Thanks!! — CRAIG
– CRAIG, Commented Dec 30, 2013 at 9:26

Shahe · Accepted Answer · 2013-12-30 09:00:16Z

2

HTML:

<input type="checkbox" checked id="agree" name="agree" value="ON">
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
<button onclick="do_file_form_submit(7);" id="submit2" name="submit2" class="custombutton">Button Number 2</button>

jQuery:

$('#agree').change(function () {
    if ($(this).is(":checked")) {
        $('button').attr("disabled", false);    
    } else {
        $('button').attr("disabled", true);
    }
});

Here is the fiddle: http://jsfiddle.net/shahe_masoyan/UpxzB/3/

answered Dec 30, 2013 at 9:00

Shahe

9842 gold badges13 silver badges35 bronze badges

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

1 Comment

CRAIG Over a year ago

Ended up using this one. Since this is the only place I am using the "Button" tag on the page, this one worked flawlessly. Thanks so much!!

Tony Jose · Accepted Answer · 2013-12-30 09:13:41Z

2

Check this out Your working page

   function checkStatus() {
    if ($('#agree_again').is(":checked")) {
        $(".custombutton").attr('disabled', false);
    }
    else {
        $(".custombutton").attr('disabled', true);
    }
}

$("#agree_again").change(function () {
    checkStatus();
});

You can call this checkStatus function on body load to check whether its checked or not on page load .

answered Dec 30, 2013 at 9:13

Tony Jose

1,6641 gold badge13 silver badges26 bronze badges

Comments

user1490927 · Accepted Answer · 2013-12-30 08:56:49Z

0

asign same classname for all button. then use the class name for selector.

document.getElementByClassName("custombutton").disabled=false

answered Dec 30, 2013 at 8:56

user1490927

436 bronze badges

Comments

Ravi · Accepted Answer · 2013-12-30 08:58:25Z

0

Try this code. Hope this resolve your problem

$(function(){
//$("#agree").is(":checked")    
    EnableDisableButton(!$("#agree").is(":checked"))
    $("#agree").click(function(){
        EnableDisableButton(!$("#agree").is(":checked"));
    })
    function EnableDisableButton(isEnable){

        $(".custombutton").attr("disabled",isEnable);
    }
});

answered Dec 30, 2013 at 8:58

Ravi

8538 silver badges17 bronze badges

Comments

Manish Jangir · Accepted Answer · 2013-12-30 09:12:12Z

0

very simple

<input type="checkbox" checked="checked" id="agree" name="agree" value="ON" 
 class="agree_chk" />
<input type="button" class="button" id="button1" value="button1"/>
<input type="button" class="button" id="button1" value="button2"/>
<input type="button" class="button" id="button1" value="button3"/>
<input type="button" class="button" id="button1" value="button4"/>

and the javascript is

$(document).on('click','#agree',function() {
     $('.button').attr({disabled:!$(this).is(':checked')}) 
});

js fiddle http://jsfiddle.net/5V2Y4/

answered Dec 30, 2013 at 9:12

Manish Jangir

5,4576 gold badges49 silver badges79 bronze badges

Comments

Myth · Accepted Answer · 2013-12-30 08:57:41Z

-1

try this code

<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="change()">
    <input type="button" id="button1">
    <input type="button" id="button2">
    <input type="button" id="button3">

<script>

     $(document).ready(function() {
           change();
        });
    function change() {
        var i = 1;
        for (i = 1; i <= 3; i++) {
            var btnid = "button" + i;
            if (document.getElementById("agree").checked) {
                document.getElementById(btnid).disabled = false;
            } else {
                document.getElementById(btnid).disabled = true;
            }
        }
    }
</script>

you can change the limit as the number of buttons changes

answered Dec 30, 2013 at 8:57

Myth

4467 silver badges19 bronze badges

1 Comment

Myth Over a year ago

May I know Why I got a down vote. this one actually works fine

Collectives™ on Stack Overflow

Enabling or Disabling Buttons Based on CheckBox

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related