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>
</div>
<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>
</div>
<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>
<br /><br /><br /><br />
<div id="btnCheckin" style="display:none">
<button id="btnCheckinBtn" style="font-size: 18pt; width: 175px; height: 75px;">Check In</button>
</div>
</form>
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))
});
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) {
$('#btnCheckin').show();
} else {
$('#btnCheckin').hide();
}
});
Here is a fiddle with your markup: http://jsfiddle.net/GGdtw/
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)
<script>
$(document).ready(function() {
$("#checkbox").click(function() {
if (("#checkbox").is(":checked")) {
//button show (.show())
else {
//disable the button (.hide())
}
});
});
</script>
Also, get rid of the "display: none;"
in the button style.
Fiddle: http://jsfiddle.net/mbYby/
You can also use jQuery '.toggle()':
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.