Using jQuery to disable submit button if no checkboxes are checked.
This post is really just an extension of a post by Charlie Griefer. He did all of the work, I just made a few modifications to it to fit my needs. :-)
Anyway, to build off of Charlie's example, let's say we decided that we only wanted users to be able to submit our form if at least one of the checkboxes was checked. Otherwise, the submit button needs to be disabled. We've already seen (in Charlie's example) how to determine if any of the checkboxes have been checked. With just a little modification, we can use that to determine whether our submit button is enabled or not.
Originally, I came up with the following code, which works great but it just seems a little "clunky" to me.
//disable submit button if no checkboxes are checked.
$(document).ready(function() {
$('input:checkbox').click(function() {
//set our checkedcount variable to 0
var checkedCount = 0;
//loop through and count the number of "checked" boxes
$('input:checkbox:checked').each(function() {
//if a checked box was found, increase checkedCount by 1
checkedCount++;
});
//if checkedCount is still zero, disable submit button.
if (checkedCount == 0){
$('#submitButton').attr('disabled', 'disabled');
}
//if checkCount is not 0, enable the submit button
else {
$('#submitButton').removeAttr('disabled');
}
});
});
</script>
Now, I'll be the first to confess that there's a better way to do this. I don't do much jQuery development so I'm not well versed in it, but this was quick and simple, and it worked. But, as I said, it seemed a little "clunky" so I asked Charlie for his opinion on how to handle this situation. Below is what he came up with, which I like a lot better.
$(document).ready(function() {
$('input:checkbox').click(function() {
var buttonsChecked = $('input:checkbox:checked');
if (buttonsChecked.length) {
$('#submitButton').removeAttr('disabled');
}
else {
$('#submitButton').attr('disabled', 'disabled');
}
});
});
</script>
And that's pretty much it. Thanks, Charlie! Below is the complete code sample that I wound up using. Since I'm not a big fan of javascript, the less lines of code I have to deal with the better!
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
$(document).ready(function() {
$('input:checkbox').click(function() {
var buttonsChecked = $('input:checkbox:checked');
if (buttonsChecked.length) {
$('#submitButton').removeAttr('disabled');
}
else {
$('#submitButton').attr('disabled', 'disabled');
}
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" name="cb1" id="cb1" value="a" /> A<br />
<input type="checkbox" name="cb2" id="cb2" value="b" /> B<br />
<input type="checkbox" name="cb3" id="cb3" value="c" /> C<br />
<input type="checkbox" name="cb4" id="cb4" value="d" /> D<br />
<input type="checkbox" name="cb5" id="cb5" value="e" /> E<br />
<!-- disable our submit button by default -->
<input type="submit" id="submitButton" value="submit" disabled="true" />
</form>
</body>
</html>
I think Charlie's solution to the problem is pretty slick. Like anything in programming, though, I realize there are multiple ways to do the same thing. So, if anyone has any suggestions for another way to do this, I'd love to hear them.
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]