samedi 14 novembre 2015

Prevent Checkbox being selected based on selection

I have checkbox for games and based on what is selected, certain checkbox should be prevented from being checked.i.e if either BRIDGE, BUKHAR, CRICKET, GOLF, SCRABBLE or SWIMMING is selected, all other games should be prevented from selcetion except TUG OF WAR,MINI MARATHON, ATHLETICS, FOOTBALL, ROLLER BLADING AND GAMMING.

Below is my HTMl Code:

<ul class="gfield_checkbox" id="input_1_1"><li class="gchoice_1_1_1">
<input name="input_1.1" type="checkbox" value="Athletics" id="choice_1_1_1" tabindex="1">
<label for="choice_1_1_1" id="label_1_1_1">Athletics</label>
</li><li class="gchoice_1_1_2">
<input name="input_1.2" type="checkbox" value="Badminton" id="choice_1_1_2" tabindex="2">
<label for="choice_1_1_2" id="label_1_1_2">Badminton</label>
</li><li class="gchoice_1_1_3">
<input name="input_1.3" type="checkbox" value="Bridge" id="choice_1_1_3" tabindex="3">
<label for="choice_1_1_3" id="label_1_1_3">Bridge</label>
</li><li class="gchoice_1_1_4">
<input name="input_1.4" type="checkbox" value="Bukhar" id="choice_1_1_4" tabindex="4">
<label for="choice_1_1_4" id="label_1_1_4">Bukhar</label>
</li><li class="gchoice_1_1_5">
<input name="input_1.5" type="checkbox" value="Chess" id="choice_1_1_5" tabindex="5">
<label for="choice_1_1_5" id="label_1_1_5">Chess</label>
</li><li class="gchoice_1_1_6">
<input name="input_1.6" type="checkbox" value="Cricket" id="choice_1_1_6" tabindex="6">
<label for="choice_1_1_6" id="label_1_1_6">Cricket</label>
</li><li class="gchoice_1_1_7">
<input name="input_1.7" type="checkbox" value="Darts" id="choice_1_1_7" tabindex="7">
<label for="choice_1_1_7" id="label_1_1_7">Darts</label>
</li><li class="gchoice_1_1_8">
<input name="input_1.8" type="checkbox" value="Football" id="choice_1_1_8" tabindex="8">
<label for="choice_1_1_8" id="label_1_1_8">Football</label>
</li><li class="gchoice_1_1_9">
<input name="input_1.9" type="checkbox" value="Gaming" id="choice_1_1_9" tabindex="9">
<label for="choice_1_1_9" id="label_1_1_9">Gaming</label>
</li><li class="gchoice_1_1_11">
<input name="input_1.11" type="checkbox" value="Golf" id="choice_1_1_11" tabindex="10">
<label for="choice_1_1_11" id="label_1_1_11">Golf</label>
</li><li class="gchoice_1_1_12">
<input name="input_1.12" type="checkbox" value="Marathon" id="choice_1_1_12" tabindex="11">
<label for="choice_1_1_12" id="label_1_1_12">Marathon</label>
</li><li class="gchoice_1_1_13">
<input name="input_1.13" type="checkbox" value="Roller-Blading" id="choice_1_1_13" tabindex="12">
<label for="choice_1_1_13" id="label_1_1_13">Roller-Blading</label>
</li><li class="gchoice_1_1_14">
<input name="input_1.14" type="checkbox" value="Scrabble" id="choice_1_1_14" tabindex="13">
<label for="choice_1_1_14" id="label_1_1_14">Scrabble</label>
</li><li class="gchoice_1_1_15">
<input name="input_1.15" type="checkbox" value="Snooker" id="choice_1_1_15" tabindex="14">
<label for="choice_1_1_15" id="label_1_1_15">Snooker</label>
</li><li class="gchoice_1_1_16">
<input name="input_1.16" type="checkbox" value="Squash" id="choice_1_1_16" tabindex="15">
<label for="choice_1_1_16" id="label_1_1_16">Squash</label>
</li><li class="gchoice_1_1_17">
<input name="input_1.17" type="checkbox" value="Swimming" id="choice_1_1_17" tabindex="16">
<label for="choice_1_1_17" id="label_1_1_17">Swimming</label>
</li><li class="gchoice_1_1_18">
<input name="input_1.18" type="checkbox" value="Table-Tennis" id="choice_1_1_18" tabindex="17">
<label for="choice_1_1_18" id="label_1_1_18">Table-Tennis</label>
</li><li class="gchoice_1_1_19">
<input name="input_1.19" type="checkbox" value="Tennis" id="choice_1_1_19" tabindex="18">
<label for="choice_1_1_19" id="label_1_1_19">Tennis</label>
</li><li class="gchoice_1_1_21">
<input name="input_1.21" type="checkbox" value="Tug of War" id="choice_1_1_21" tabindex="19">
<label for="choice_1_1_21" id="label_1_1_21">Tug of War</label>
</li><li class="gchoice_1_1_22">
<input name="input_1.22" type="checkbox" value="Volleyball" id="choice_1_1_22" tabindex="20">
<label for="choice_1_1_22" id="label_1_1_22">Volleyball</label>

Jquery :

$('input[id^="id"]').click(function() {
var $this = $(this);
if ($this.is("#choice_1_1_1")) {
    if ($("#choice_1_1_1:checked").length > 0) {
        $("#choice_1_1_2").prop({ disabled: true, checked: false });
    } else {
        $("#choice_1_1_3").prop("disabled", false);
    }
} 

});

Fiddle




Aucun commentaire:

Enregistrer un commentaire