Jquery in checkboxes

[genzedu777]

Hi,

 

I have issue here, I have done a jquery function, where user has to check 'North', then the rest of the 'districts' will be activated for checking, if not they are not allow to be checked.

 

As for the above, I have managed to achieve it, however when I have unchecked 'North' box, the 'districts' boxes are still activated.

 

My question is how do I deactivate the 'districts' checkboxes if 'North' box is unchecked?

 

Please look at my attachment for a clearer picture

 

//This is my jquery code

 

 

<script type="text/javascript">

$(document).ready(function() {

 

$('.district_a input').attr('disabled', true).css('backgroundColor','#E5E5E5');

$('.district_a label').css('color','#CCC');

 

$('#zone_1').click(function() {

$('.district_a input').attr('disabled', false).css('backgroundColor','');

$('.district_a label').css('color','');

}); // end click()

 

}); // end ready()

</script>

 

[attachment deleted by admin]

[brianlange]

You didn't post html so I created my own example. See below.

 

  $(document).ready(function() {
        $('#north').click(function() {
            $('.locations').each(function() {
                $(this).attr('disabled', !$(this).attr('disabled'));
            });
            
        });       
        
    
    });

 

Working example at http://www.realtown.com/test12.php

[genzedu777]

Hi Brianlange,

 

Thank you for the advice. But it is not working, currently my code is working, it's only when using unclick North, the districts in <div>district_a</div>, will not be deactivated. Any advice on my current code? Possible to place an if and else query in jquery?

 

//Your code

$(document).ready(function() {

        $('#zone_1').click(function() {

            $('.district_a').each(function() {

                $(this).attr('disabled', !$(this).attr('disabled'));

            });

           

        });   

    });

 

//My code

$(document).ready(function() {

$('.district_a input').attr('disabled', true).css('backgroundColor','#E5E5E5');
$('.district_a label').css('color','#CCC');

$('#zone_1').click(function() {
   $('.district_a input').attr('disabled', false).css('backgroundColor','');
   $('.district_a label').css('color','');
}); // end click()

}); // end ready()

[brianlange]

No where in your code are you setting the checkboxes to disable when North is unchecked.

 

Notice how my code sets the disable value to the opposite of what it currently is

$(this).attr('disabled', !$(this).attr('disabled'));

 

If you'd like more help post the html you are using.

[genzedu777]

Hi Brian,

 

This is my html code. Kindly advice how I should imply your code? I totally understand the $(this).attr('disabled', !$(this).attr('disabled')); function, but it doesn't seem to work in my code. Thanks

 

 

 

 

/***North's DISTRICTS***/

echo '<input name="zone[]" type="checkbox" id="zone_1" value="1">';

echo '<span class="zone_text_enlarge"><label for="zone_1">North</label></span><br/>';

 

$dbc = mysqli_connect('111', 111, 111, 111)

or die(mysqli_error());

$query = ("SELECT * FROM tutor_preferred_district ORDER BY district_id ASC LIMIT 7");

$sql = mysqli_query($dbc, $query)

or die(mysqli_error());

 

echo'<div class="district_a">';

echo'<table><tr>'; // Start your table outside the loop... and your first row

$count = 0; // Start your counter

while($data = mysqli_fetch_array($sql)) {

/* Check to see whether or not this is a *new* row

If it is, then end the previous and start the next and restart the counter.

*/

if ($count % 5 == 0) {

echo "</tr><tr>"; $count = 0;

}

 

echo '<td><input name="district[]" type="checkbox" id="district_'.$data['district_id'].'" value="'.$data['district_id'].'"/>';

echo '<label for="district_'.$data['district_id'].'">'.$data['district_name'].'</label></td>';

 

$count++; //Increment the count

}

echo '</tr></table><br/>'; //Close your last row and your table, outside the loop

echo '</div>'; //class = disrict_a

 

[brianlange]

You need a check to see what the current values of the check box is.
Try the code below.

$('#zone_1').click(function() {

   var isDisabled = $('.district_a input').attr('disabled');

  if (isDisabled) {
   $('.district_a input').attr('disabled', false).css('backgroundColor','');
   $('.district_a label').css('color','');
} else {
   $('.district_a input').attr('disabled', true).css('backgroundColor','');
   $('.district_a label').css('color','');
}

}); // end click()

[genzedu777]

Hi Brian,

 

Would you mind taking a look at my site? www.championtutor.com/t.php

 

Currently it works, but in the opposite way.

 

What I currently need,

 

'district_a' checkboxes to be disabled when 'North' box is not checked

 

And when user clicks on 'North' box, 'district_a' checkboxes will be activated.

 

And if the 'North' box is unchecked again, all the values in 'district_a' will be cleared.

 

Do you have any suggestion? Thanks

[brianlange]

The checkboxes are not disabled at that start. Add a line to disable them.

 

$(document).ready(function() {

//New Code to disable checkboxes

$('.district_a input').attr('disabled', true);

 

$('#zone_1').click(function() {

 

[genzedu777]

Hi Brian,

 

Last question. After the 'North' checkbox was unchecked again, I would like to have all the checkboxes in 'district' to be reset.

 

Meaning to say, if 'district 1' and 'district 2' checkboxes are selected in North, but after unchecking 'North', I would like the checkboxes in 'district 1' and 'district 2' to be de-selected (reset).

 

What command or code should I add in? thanks

[brianlange]

Just put in a line to set the checked attribute to false.

Here's my example http://www.realtown.com/test12.php

$(document).ready(function() {

        $('#north').click(function() {

            $('.locations').each(function() {

               

                $(this).attr('disabled', !$(this).attr('disabled'));

                $(this).attr('checked', false);

             

            });

           

        });     

       

   

    });

[genzedu777]

Hi Brian,

 

Many thanks!!! It works, however just on the curious point of view, I would like to understand more of the codes. Thanks

 

 

 

//When user clicks on north checkbox,, all the checkboxes in '.locations' will be activated? However which code actually activates it?

1)  $(this).attr('disabled'?

2) !$(this).attr('disabled'));

 

And which code actually reset all the values in '.locations' when the checkbox in '#north' is uncheckeD? But how do you justify the code below in (1), I don't really see the reset command?

1) $(this).attr('checked', false);

 

 

 

$('#north').click(function() {
$('.locations').each(function() {
                
$(this).attr('disabled', !$(this).attr('disabled'));
$(this).attr('checked', false);

 

[genzedu777]

Hi Brian,

 

Please ignore my previous question, I have figured it out.

 

Currently I will like to change the colour of the 'label' when '.locations' are disabled.

 

I have tried some css codes, but it didn't work, could you please enlighten me? Codes which I have added are in red. Thanks

 

$('.district_1 label').css('color','#434343');

$('#zone_1').click(function() {

            $('.district_a').each(function() {

               

                if ($(this).attr('disabled')) {

                    $(this).attr('disabled', false);

$('.district_1 label').css('color','');

                } else {

                    $(this).attr('disabled', true);

$('.district_1 label').css('color','#434343');

                }

            });

           

        });// end click()

[brianlange]

Here's my working example http://gonavygolf.com/test5.html

You don't need to set the css with each iteration of the loop. It can work this way but it isn't necessary.

Just use the toggleClass function right after the click event. Be sure to add the class to the css. I used red for the font color to make the example more noticeable. Also notice the correct selector for the label is 'label.district_1'.

	
	$('#zone_1').click(function() {
		$('label.district_1').toggleClass('active');
            $('.district_a').each(function() {
                
                if ($(this).attr('disabled')) {
                    $(this).attr('disabled', false);
               		
                } else {
                    $(this).attr('disabled', true);
               		
                } 
            });

[genzedu777]

Hi Brian,

 

Thank you so much for the kind efforts, but I will like the text to be 'grey' when inactive and 'black' when it is active. Another thing is that I realised after unchecking 'North' box, the values in districts still remain, unlike the previous http://www.realtown.com/test12.php which you have coded.

 

Below is the code which was given for http://www.realtown.com/test12.php.

 

 

//How do I proceed from here to add on the text colour

 

inactive = grey

active = black

 

$('#zone_1').click(function() {

            $('.district_a').each(function() {

               

                $(this).attr('disabled', !$(this).attr('disabled'));

                $(this).attr('checked', false);

               

            })

           

        });// end click()

 

 

Thank you so much once again

[brianlange]

Check out the code here http://gonavygolf.com/test5.html

When you use toggleClass('inactive') there has to be a css class of inactive. In the code I set this to gray.

Black is the default color so you its not necessary to set this. 

 

 

[genzedu777]

Thanks! I finally got it !