Solved

Help with check box disabled state

Posted on 2011-09-25
4
194 Views
Last Modified: 2012-05-12
Hey all,

Need help with script that removes the disabled state of a button when a checkbox is clicked. The default state of the checkbox is unchecked and the default state of the button is disabled.

When the user checks the box the disabled state and disabled class is removed.

<input type="checkbox" name="term" value="Bike" />

<button type="button" disabled="disabled" class="disabled">Click Me!</button>

The framework Im using is jQuery. Thanks for your help.



0
Comment
Question by:yando18
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36596307
test page : http://jsfiddle.net/35h5r/1/

$(document).ready(function() {
    
$(":checkbox[name='term'][value='Bike']").click(function() {
    if( $(this).is(":checked") ) {
        $("button").removeAttr("disabled");
    }
    else {
        $("button").attr("disabled",true);
    }
})
    
    })

Open in new window


replace the selector $("button") if you give an ID to your button
0
 

Author Comment

by:yando18
ID: 36596385
must also remove the class disabled
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36596393
updated : http://jsfiddle.net/35h5r/2/
$(document).ready(function() {
    
$(":checkbox[name='term'][value='Bike']").click(function() {
    if( $(this).is(":checked") ) {
        $("button").removeAttr("disabled").removeClass("disabled");
    }
    else {
        $("button").attr("disabled",true).addClass("disabled");
    }
})
    
    })

Open in new window

0
 

Author Comment

by:yando18
ID: 36596400
That should do it thanks
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to count occurrences of each item in an array.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now