Dynamically disabled some checkbox options using jquery and php

Question

<input type="checkbox" name="pref[]" value="red//fuji" />Fuji
<input type="checkbox" name="pref[]" value="red//pinklady" />Pink Lady
<input type="checkbox" name="pref[]" value="red//reddelicious" />Red Delicious
<input type="checkbox" name="pref[]" value="green//grannysmith" />Granny Smith
<input type="checkbox" name="pref[]" value="green//goldendelicious" />Golden Delicious

I would like to dynamically disable group of checkbox, for example if either green apple checkboxes is checked, the three red apples checkboxes will be disabled. I would also like the checked checkbox remain checked even after the disabling.

In my real scenario, I will be populating the checkbox options from a MySQL database, so how can I achieve this using HTML, PHP and jQuery or any other ways?

you can add another html field disabled="<?php echo true or false on basis of your condition ?>" — Subash
– Subash, Commented Feb 2, 2015 at 6:21

RSquared · Accepted Answer · 2015-02-02 11:14:38Z

1

Here you go

HTML

<input type="checkbox" name="pref[]" value="red//fuji" data-type="red" />Fuji
<br/>
<input type="checkbox" name="pref[]" value="red//pinklady" data-type="red" />Pink Lady
<br/>
<input type="checkbox" name="pref[]" value="red//reddelicious" data-type="red" />Red Delicious
<br/>
<input type="checkbox" name="pref[]" value="green//grannysmith" data-type="green" />Granny Smith
<br/>
<input type="checkbox" name="pref[]" value="green//goldendelicious" data-type="green" />Golden Delicious
<br/>

JavaScript / jQuery

$(function () {
    function disableCheckboxes(color) {
        $('input[type="checkbox"]').prop('disabled', true);
        $('*[data-type="' + color + '"]').prop('disabled', false);
    };

    function enableCheckboxes() {
        $('input[type="checkbox"]').prop('disabled', false);
    }

    $('input[type="checkbox"]').on('click', function () {
        var $this = $(this);
        var color = $this.data('type');

        var x = $('*[data-type="' + color + '"]').prop('checked');

        if ($this.is(':checked')) {
            disableCheckboxes(color);
        } else if (!$('*[data-type="' + color + '"]').prop('checked')) {
            enableCheckboxes();
        }
    });
});

Example: http://jsfiddle.net/xd9xz8vg/4/

Its a little messy, but it can be cleaned up with declaring some of the jQuery selectors as variables to increase performance.

EDIT: Updated the answer as per comment.

edited Feb 2, 2015 at 11:14

answered Feb 2, 2015 at 6:37

RSquared

1,20811 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

double_espresso Over a year ago

thanks this works, but is there any way other than using class (preferable value) to choose which checkbox to disable?

RSquared Over a year ago

Sure you can use HTML5s custom data attributes to store the colour. I updated the answer

Sougata Bose · Accepted Answer · 2015-02-02 06:56:15Z

1

Try with -

<input class="red" type="checkbox" name="pref[]" value="red//fuji" />Fuji
<input class="red" type="checkbox" name="pref[]" value="red//pinklady" />Pink Lady
<input class="red" type="checkbox" name="pref[]" value="red//reddelicious" />Red Delicious
<input class="green" type="checkbox" name="pref[]" value="green//grannysmith" />Granny Smith
<input class="green" type="checkbox" name="pref[]" value="green//goldendelicious" />Golden Delicious

$(document).ready(function() {
   $('input[type="checkbox"]').on('click', function(){
     $('.green').each(function() {
        if ($(this).is(':checked')) {
           $('.red').each(function() {
              //$(this).prop('disabled', true);
              $(this).attr('disabled', true);
           })
        }
     })
   })
})

edited Feb 2, 2015 at 6:56

answered Feb 2, 2015 at 6:09

Sougata Bose

31.8k8 gold badges52 silver badges89 bronze badges

2 Comments

double_espresso Over a year ago

it doesn't disable any options:(

double_espresso Over a year ago

sorry, still doesn't disable any options.

Lepanto · Accepted Answer · 2015-02-05 08:20:56Z

Hope following code would help you with PHP that will be populated data from Server / DB as will as Jquery which will handle any client / user interaction

Disabling with PHP

<?php
$selected_fruit = 'red//pinklady'; // this is got from DB
$selected_group = explode('//', $selected_fruit);
$checkbox_options = '';

// following variable $array_of_checkbox_option as you say should be from DB
$array_of_checkbox_option = array(
array('val'=>'red//fuji', 'display_text'=>'Fuji'),
array('val'=>'red//pinklady', 'display_text'=>'Pink Lady'),
array('val'=>'red//reddelicious', 'display_text'=>'Red Delicious'),
array('val'=>'green//grannysmith', 'display_text'=>'Granny Smith'),
array('val'=>'green//goldendelicious', 'display_text'=>'Golden Delicious')
);
foreach($array_of_checkbox_option as $value){
    $group_name = explode('//', $value['val']);
    $checkbox_options .= '<input type="checkbox" name="pref[]" value="';
    $checkbox_options .= $value['val'].'"';
    $checkbox_options .= ($selected_fruit == $value['val']) ? ' checked ' : '';
    $checkbox_options .= ($group_name[0] == $selected_group[0]) ? ' disabled ' : '';
    $checkbox_options .= '/>'.$value['display_text'].'<br>';
}

echo $checkbox_options;
?>

Disabling with Javascript

<script>
$(document).ready(function() {
    $( "input[name^='pref']" ).on('click', function(){
        if($(this).is(':checked')){
            var group_name = $(this).val().split('//');
            var sel_group = group_name[0];
            $( "input[name^='pref']" ).each(function(){
                var elm_name = $(this).val().split('//');
                if(sel_group == elm_name[0]){
                    $(this).prop('disabled', true);
                }
            });
        }
    });
});
</script>

Collectives™ on Stack Overflow

Dynamically disabled some checkbox options using jquery and php

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related