防止根据选择选中复选框

时间：2015-11-14 08:20:00

标签： javascript jquery html checkbox

我有游戏的复选框，根据选择的内容，应禁止检查某些复选框。如果选择了BRIDGE，BUKHAR，CRICKET，GOLF，SCRABBLE或SWIMMING，则应禁止所有其他游戏的选择除外TUG OF WAR，MINI MARATHON，ATHLETICS，FOOTBALL，ROLLER BLADING AND GAMMING。

以下是我的HTMl代码：

<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

2 个答案:

答案 0 :(得分：0)

正如@Azzi建议的那样，

添加BRIDGE, BUKHAR, CRICKET, GOLF, SCRABBLE or SWIMMING班级group-1 和 TUG OF WAR,MINI MARATHON, ATHLETICS, FOOTBALL, ROLLER BLADING和GAMMING班group-3，其他所有内容都为group-2

以下是一段代码片段（取自您的代码），只是为了给您一个想法。它不是一个完整的解决方案，但你会知道如何继续前进。 

$('li input').click(function() {
  var $this = $(this);
  if ($this.is(".group-1")) {
    if($this.is(':checked') == true) {
      if ($(".group-2").length > 0) {
        $(".group-2").prop({ disabled: true, checked: false });
      } else {
        $(".group-3").prop("disabled", false);
      }
    }
  } 
});

答案 1 :(得分：0)

$(".group1").click(function() {
  var checked = $(this).is(':checked');

  //check any other elements check in same class
  if (!checked) {
    $(".group1").not(this).each(function() {
      if ($(this).is(':checked')) {
        checked = true;
        return;
      }
    });
  }
  $(".group2").each(function() {
    $(this).prop("disabled", checked) //dissable	
      .prop('checked', false); //checked state false
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" class="group2" 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" class="group1" 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" class="group1" 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" class="group2" 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" class="group1" 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" class="group2" 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" class="group2" 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" class="group1" 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" class="group1" 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" class="group2" 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" class="group2" 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" class="group1" 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" class="group2" 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" class="group2" 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" class="group2" value="Volleyball" id="choice_1_1_22" tabindex="20">
    <label for="choice_1_1_22" id="label_1_1_22">Volleyball</label>

这是工作代码..

相关问题
最新问题