Jump to content


Photo

JavaScript (jQuery) disable checkbox issue


  • Please log in to reply
1 reply to this topic

#1 Semsem

Semsem

    Member

  • Members
  • PipPip
  • 13 posts

Posted 26 April 2013 - 09:58 PM

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">&nbsp;</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">&nbsp;</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.



#2 Irate

Irate

    Advanced Member

  • Members
  • PipPipPip
  • 358 posts
  • LocationHamburg, Germany
  • Age:17

Posted 29 April 2013 - 06:04 AM

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(){});
Quod placet mihi non placeat tibi. - What I think to be good must not always equal your perception of it.

I am not perfect. I try a lot with the code I provide and I don't guarantee for it to work as I have mostly no option to test it on my mobile phone. I do apologize for any inconvenience I caused, but if I do happen to have helped, liking my posts or marking them as to have solved or answered your question would be nice.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com