Take the 2-minute tour ×

Below I have code for a specific application that I am building with PHP. My job is User interface, and I have looked and looked for code on how to make this work.

With this form, it's using the latest update of Jquery UI to styalize the buttons and checkboxes. I need for the button to appear when a check box has been checked, and disappear when unchecked.

Haven't been able to find any code that works for this, and is driving me half insane, and lagging me behind.

<form name="purpose" method="post" action="" >
    <div id="radiosetPURPOSE">
        <input type="checkbox" id="radio1" name="homework" value="homework" ><label for="radio1" style="font-size: 13pt; width: 130px; height: 40px;">Homework</label>
        <input type="checkbox" id="radio2" name="computer" value="computer" ><label for="radio2" style="font-size: 13pt; width: 130px; height: 40px;">Computer</label>
    <br />
    <div id="radiosetPURPOSE2">
        <input type="checkbox" id="radio3" name="books" value="books" ><label for="radio3" style="font-size: 13pt; width: 130px; height: 40px;">Books</label>
        <input type="checkbox" id="radio4" name="reading" value="reading" ><label for="radio4" style="font-size: 13pt; width: 130px; height: 40px;">Reading</label>                     
    <br />
        <div id="radiosetPURPOSE3">
        <input type="checkbox" id="radio5" name="tutoring" value="tutoring" ><label for="radio5" style="font-size: 13pt; width: 130px; height: 40px;">Tutoring</label>                     
        <div id="btnCheckin" style="display:none">   
        <button id="btnCheckinBtn" style="font-size: 18pt; width: 175px; height: 75px;">Check In</button>
share|improve this question
Take that style out of the markup, add a class and use CSS. –  Mark Schultheiss Feb 14 '13 at 22:34
Here is a fiddle with the style as I noted: jsfiddle.net/GGdtw/1 –  Mark Schultheiss Feb 14 '13 at 22:43

4 Answers 4

up vote 0 down vote accepted

IF I read your requirements properly, you need to check if ANY of the checkboxes are check to show the button, and if ALL are unchecked, hide it?

This can occur on a click or on a keyboard action so you need to check the change event for that. Wrap this up in a document ready handler, include jQuery and you are set.

$('input:checkbox').change(function () {
    if ($('input[type=checkbox]:checked').length > 0) {
    } else {

Here is a fiddle with your markup:http://jsfiddle.net/GGdtw/

share|improve this answer
Awesome! This actually worked. Thank you very much, I appriciate the help. –  Brodsort117 Feb 15 '13 at 21:50

Seems I misread your question, and you want the button enabled when any checkbox is checked.

This will look and see if any checkboxes are ticked, within the form with name purpose.

$("input:checkbox").change(function() {    
  $("#btnCheckin").toggle(!!$('form[name="purpose"] > input:checkbox:checked').length))
share|improve this answer
Much cleaner than mine, the more I know :) –  tymeJV Feb 14 '13 at 22:19
I see NO checkbox with that id of "checkbox" in the OP's markup. also not going to work with multiple checkboxes to use toggle. –  Mark Schultheiss Feb 14 '13 at 22:30
Made changes. Performs as intended. –  Aesthete Feb 14 '13 at 23:03

When you click the checkbox, check to see if it is checked or unchecked, and based on that, enable or disable the button. (Using jQuery)

    $(document).ready(function() {

    $("#checkbox").click(function() {
        if (("#checkbox").is(":checked")) {
            //button show (.show())
        else {
            //disable the button (.hide())

Also, get rid of the "display: none;" in the button style. Fiddle: http://jsfiddle.net/mbYby/

share|improve this answer
Okay, so how would I itegrate the Jquery code into my app. Any javascript i've used doesn't work, especially similar to your above code –  Brodsort117 Feb 14 '13 at 22:08
I made the edits above, put inside a <script> inside a document ready function. –  tymeJV Feb 14 '13 at 22:11
If you're still having trouble, I made a fiddle: jsfiddle.net/mbYby –  tymeJV Feb 14 '13 at 22:16
I see NO checkbox with that ID in his markup, and click will not work here with multiple checkboxes in play. –  Mark Schultheiss Feb 14 '13 at 22:29

You can also use jQuery '.toggle()':


share|improve this answer

Your Answer


