Question

I have a web app (PHP) and I have to make this change. I am more of a database, scripting guy, please bear with me on this one!

I have 8 check boxes (think numbered 1~8) in a form. I have to implement a condition where in :

If one of the first 4 checkboxes are checked (only one checkbox can be checked in the first 4),
Then the next 4 checkboxes should be disabled
Else the next 4 checkboxes should be enabled.

My solution :

• Make the first 4 checkboxes radiobuttons to confirm to the only one
  checkbox can be selected condition.
• Disable/Enable the next 4 checkboxes based on the above action. So,
  if the radiobutton is not selected, then the next 4 checkboxes should
  be available for selection.

I have to actually disable the checkboxes rather than hide using jQuery, so the checkboxes should be solidgray (uncheckable) when disabled.

Sample code (stripped off some formatting mess for others looking for a similar solution) :

        <div>
            <input type="checkbox" name="check1" value="1" id="check1" <?php if (!empty($rows['check1'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check2" value="1" id="check2" <?php if (!empty($rows['check2'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check3" value="1" id="check3" <?php if (!empty($rows['check3'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check4" value="1" id="check4" <?php if (!empty($rows['check4'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check5" value="1" id="check5" <?php if (!empty($rows['check5'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check6" value="1" id="check6" <?php if (!empty($rows['check6'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check7" value="1" id="check7" <?php if (!empty($rows['check7'])) { echo 'checked="checked"'; } ?> />
            <input type="checkbox" name="check8" value="1" id="check8" <?php if (!empty($rows['check8'])) { echo 'checked="checked"'; } ?> />
        </div>

My requests :

• What is the most efficient way of doing this? (simple without complicating the problem)
• Any sample code is greatly appreciated.

Answer 1

I think this is what you’re looking for. You can achieve it using .index() to get current clicked checkbox. .slice() is used to get all elements at index 4 and after.

$('input[type=checkbox]').change(function(){
    var $linputs =  $('input[type=checkbox]').slice(4);
    var $this = $(this);    
    $linputs.prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $linputs.prop('checked',false);
    }
});​

FIDDDLE

Or is it something like this that you want? Where only one of the first four checkboxes can be checked. If one is checked then all the others will be disabled.

$('input[type=checkbox]').change(function(){
    var $this = $(this);    
    $(linputs).prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $(linputs).prop('checked',false);
    }
});​

http://jsfiddle.net/h5wDr/

EDIT:

if you have other checkboxes in the page and want to be able to separate them from this logic, you can add context in the selector so it keeps this code isolated to only those within this div like so

<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>

Then just add the context

var $inputs = $('input[type=checkbox]', $('#test')); 
// this will only select checkboxes within the element with id=test

http://jsfiddle.net/h5wDr/2/