How to disable a button in bootstrap for checkboxes?

Question

I have a code in java script for disabling a button until the checkbox is checked. It doesn't grey this out in bootstrap. It just shows the button.

https://jsfiddle.net/soljohnston777/wg00ymg8/

Bootstrap attempt to make this work:

Modal / Html:

    <div id="example" class="modal hide fade in" style="display: none; ">  
    <div class="modal-header">  
    <a class="close" data-dismiss="modal">×</a>  
    <h3>Terms and Conditions</h3>  
    </div>  
        <div class="modal-body"> 

        <h4>Text in a modal <input type="checkbox" required="required" id="myCheck"></h4>

        <p>You can add some text here.</p> 
    <div class="checkbox">
    <input id="check" name="checkbox" type="checkbox">
    <label for="check">Some Text Here</label>
    </div>          
        </div>  
    <div class="modal-footer">  

    <input type="submit" name="" class="btn" id="btncheck" value="I Agree" />
    <a href="#" class="btn btn-success" data-dismiss="modal">Close</a>  
    </div>  
</div>

Without the Modal classes:

http://www.bootply.com/nV8ShsZUH5

What am I doing wrong?

Possible duplicate of [How can I detect if anything in my checkbox is selected?](http://stackoverflow.com/questions/37619257/how-can-i-detect-if-anything-in-my-checkbox-is-selected) — blurfus, Jun 06 '16 at 17:05
http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery — player87, Jun 06 '16 at 17:05
The reason why this isn't a duplicate is because I am having the issue with bootstrap modals. If the code is run as "not" a modal, it works fine. — DDJ, Jun 06 '16 at 19:03

Saqib Rokadia · Answer 1 · 2016-06-06T17:02:08.237

1

You want to use attributes instead of properties.

http://api.jquery.com/prop/

Instead of:

btn.prop("disabled", !this.checked);

You can directly access the disabled attribute from the checkbox object and modify it.

this.disabled = !this.checked;

edited Jun 06 '16 at 17:02

answered Jun 06 '16 at 16:56

Saqib Rokadia

629
7
16

1

I was aiming for the button to be disabled when the box is not checked. Sorry I didn't specify that. – DDJ Jun 06 '16 at 16:58
Edited to remove comments on the part about the logic on the checkbox. – Saqib Rokadia Jun 06 '16 at 17:03
Could you give me more code to explain. This problem only happens with the modal is up. – DDJ Jun 06 '16 at 19:06

score 0 · Answer 2 · answered Jun 06 '16 at 19:57

0

In case anyone else has this issue, I had to upgrade to bootstrap 3, then this code worked great

http://www.bootply.com/AlUZOz0zXB

answered Jun 06 '16 at 19:57

DDJ

807
5
13
31

How to disable a button in bootstrap for checkboxes?

2 Answers2