JavaScript (jQuery) disable checkbox issue

[Semsem]

Okay, so I have a bit of a problem. I have some code, the JS works (at least with the non-CSS modified version), but it fails with the CSS modified version. Wondering if anyone can lend me some help to figure out what went wrong with the implementation of the CSS...

What I want to have happen, is the any of the first 4 chekboxes, if checked, disable all others. But, if any of the other checkboxes (numbers 5 and up) are checked, none are disabled (unless of course someone checks one of the first four). And all it's doing is disabling all when any checkbox is checked, not just the first four checkboxes are checked.

 

My JavaScript:

<script type="text/javascript">
$(window).load(function(){
var $inputs = $('input[type=checkbox]', $('#test'));
var $inputs2 = $('input[type=checkbox]', $('#test2'));
$inputs.change(function(){
var $this = $(this);
$inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs.not(this).prop('checked',false);
}
});
$inputs2.change(function(){
var $this = $(this);
$inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs2.not(this).prop('checked',false);
}
});
});

The first Div:

<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="f1" name="1" class="css-checkbox" value="1" />
<label for="f1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f2" name="2" class="css-checkbox" value="2" />
<label for="f2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f3" name="3" class="css-checkbox" value="3" />
<label for="f3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f4" name="4" class="css-checkbox" value="4" />
<label for="f4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f5" name="5" class="css-checkbox" value="5" />
<label for="f5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f6" name="6" class="css-checkbox" value="6" />
<label for="f6" class="css-label">6</label></td></tr>
</table>
</div>

My CSS, if needed:

<style>
#Error {display: none;}
input[type=checkbox].css-checkbox {display:none;}
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;}
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;}
.css-label{ background-image:url(web-two-style.png);}
</style>

The problem is: the following works, and the following was later modified with CSS and I can't figure out what went wrong.

What works:

<div id='test'>
<input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</div>

It gets even odder when I add the code that worked to the same div as the one that doesn't, since it the above non-CSS then works properly and will disable (where appropriate) all the checkboxes regardless of CSS, but when the CSS are checked, all are disabled:

<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="f1" name="1" class="css-checkbox" value="1" />
<label for="f1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f2" name="2" class="css-checkbox" value="2" />
<label for="f2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f3" name="3" class="css-checkbox" value="3" />
<label for="f3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f4" name="4" class="css-checkbox" value="4" />
<label for="f4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f5" name="5" class="css-checkbox" value="5" />
<label for="f5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="f6" name="6" class="css-checkbox" value="6" />
<label for="f6" class="css-label">6</label></td></tr> <input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</table>
</div>

Using the latest jQuery version, if needed.

[Irate]

If you want to use a variable in jQuery with $ in its name, you have to call jQuery.noConflict(); and need to refer to all jQuery functions with jQuery().

 

Also try firing the whole event on jQuery(document).ready(function(){});