防止复选框被选中基于选择答案

【问题标题】：Prevent Checkbox being selected based on selection防止复选框被选中基于选择
【发布时间】：2015-11-14 17:17:47
【问题描述】：

我有游戏复选框，根据选择的内容，应阻止选中某些复选框。即，如果选择了 BRIDGE、BUKHAR、CRICKET、GOLF、SCRABBLE 或 SWIMMING，则应阻止选择所有其他游戏，除了拔河、迷你马拉松、田径、足球、旱冰和游戏。

下面是我的 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

【问题讨论】：

你可以使用两个不同的类
@Azzi 我该怎么做？
1 个疑问可能与您的问题无关。我只是在想为什么所有这些 tabindex 都有不同的价值？

标签： javascript jquery html checkbox

【解决方案1】：

正如@Azzi 建议的那样，

添加BRIDGE, BUKHAR, CRICKET, GOLF, SCRABBLE or SWIMMING类group-1 和 TUG OF WAR,MINI MARATHON, ATHLETICS, FOOTBALL, ROLLER BLADING AND GAMMING class group-3，其他都是group-2

以下是一个代码 sn-p（取自您的代码），只是为了给您一个想法。它不是一个完整的解决方案，但您将了解如何继续。

$('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);
      }
    }
  } 
});

【讨论】：

【解决方案2】：

$(".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>

这是工作代码..

【讨论】：