I have a problem about checking all the checkbox and once you've checked all the checkbox the button will be disabled. I'm new to javascript and it's really hard for me to understand how I can fix this. Anyone knows how to fix this will be really a big help for my project.
Here's my code by the way:
<html xmlns="http://ift.tt/lH0Osb">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="http://ift.tt/1qRgvOJ"></script>
<script type="text/javascript">
$(function () {
$('.chk1').change(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
}
else {
var isChecked = false;
$('.chk1').each(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
isChecked = true;
}
});
if (!isChecked) {
$('#btnClick').attr('disabled', 'disabled');
}
}
})
});
</script>
<script type="text/javascript">
function checkALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = true;
}
CheckIfChecked();
}
function unCheckALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = false;
}
CheckIfChecked();
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<a href="javascript:selectToggle(true, 'drawing');" id="show" onclick="checkALL();">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide" onclick="unCheckALL();">None</a>
<tr>
<td>
<input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" onClick="CheckIfChecked(this.id)" name="name" />
One
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Two
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Three
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Four
</td>
</tr>
<button id="btnClick" disabled="disabled">
Click me !!!</button>
</table>
</body>
</html>
In my code when I checked one or more checkbox the button will enabled and when there is no checked checkbox the button will be disabled. Now my problem is when I clicked the All link, it should checked all the checkboxes and enable the button and when I clicked the None it will uncheck the checkboxes and disable the button. Thanks for the help in advance
Aucun commentaire:
Enregistrer un commentaire