CODEWITHSUNDEEP
javascriptjqueryforms
CRAIG
CRAIG

Reputation: 1029

Enabling or Disabling Buttons Based on CheckBox

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:

  1. 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

Upvotes: 2

Views: 2150

Answers (6)

Tony Jose
Tony Jose

Reputation: 1664

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 .

Upvotes: 2

Manish Jangir
Manish Jangir

Reputation: 5437

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/

Upvotes: 0

Shahe
Shahe

Reputation: 984

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/

Upvotes: 2

Ravi
Ravi

Reputation: 853

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);
    }
});

Upvotes: 0

Myth
Myth

Reputation: 446

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

Upvotes: -1

user1490927
user1490927

Reputation: 43

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

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

Upvotes: 0

Related Questions