禁用复选框列表

时间：2018-03-21 10:40:15

标签： jquery

我有一个复选框列表，其中包含13个不同的值，我尝试使用jquery在选择9,10和11时禁用所有这些值。

因此，当选中9时，除了10和11之外全部被禁用。当选择10时，除了9和11之外全部被禁用。当选择11时，除了9和10之外全部被禁用

<asp:CheckBoxList ID="checkboxlist1" runat="server">
    <asp:ListItem Value="example1">     example </asp:ListItem>
    <asp:ListItem Value="example2">   example </asp:ListItem>
    <asp:ListItem Value="example3"> example </asp:ListItem>
    <asp:ListItem Value="example4">    example </asp:ListItem>
    <asp:ListItem Value="example5">     example </asp:ListItem>
    <asp:ListItem Value="example6">    example </asp:ListItem>
    <asp:ListItem Value="example7">     example </asp:ListItem>
    <asp:ListItem Value="example8">   example </asp:ListItem>
    <asp:ListItem Value="example9"> example </asp:ListItem>
    <asp:ListItem Value="example10">    example </asp:ListItem>
    <asp:ListItem Value="example11">     example </asp:ListItem>
    <asp:ListItem Value="example12">    example </asp:ListItem>
    <asp:ListItem Value="example13">    example </asp:ListItem>
</asp:CheckBoxList>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(function () {
        $("input[type='checkbox']").change(function () {
            debugger;
            if (($("input[type='checkbox']")[9]).checked) {
                $("input[type='checkbox']").not($("input[type='checkbox']")[9]).attr("disabled", "disabled");
            }
            else {
                $("input[type='checkbox']").not($("input[type='checkbox']")[9]).removeAttr("disabled");
            }
        });
    });
</script>

答案：

<script>

    var indices = [9, 10, 11];

    indices.forEach(function (i) {
        $(".parent input[type='checkbox']").eq(i - 1).addClass("magic");
    });
    $(".parent input[type='checkbox']").change(function () {
        if ($(this).hasClass("magic")) {
            if (this.checked)
                $(".parent input[type='checkbox']:not(.magic)").prop("checked", false).prop("disabled", true);
            else {
                if ($(".parent input.magic[type='checkbox']:checked").length == 0)
                    $(".parent input[type='checkbox']:not(.magic)").prop("disabled", false);
            }
        }
    });
</script>

<style>
     label {display: block;}
.magic + span {font-weight: bold;}
 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <label><input type="checkbox" name="check[]" /> <span>Input 1</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 2</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 3</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 4</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 5</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 6</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 7</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 8</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 9</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 10</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 11</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 12</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 13</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 14</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 15</span></label>
</div>

3 个答案:

答案 0 :(得分：2)

扩展另一个答案，我做得很好，以便如果选择其中一个热门区域（并且可以配置），您将无法选择其他区域，也无法选择其他区域。

技术上讲，我在这里做的是什么：

  • 选择神奇的，除魔术之外的其他人将被禁用和取消选择。
  • 当所有魔法未被选中时，其他人表现正常。
  • 在任何时候，你都无法选择神奇的魔法。
  • 您不需要通过索引，而是可以在输入中添加类magic。

* 我的意思是魔术，不应该选择那些。 

$(".parent input[type='checkbox']").change(function() {
  if ($(this).hasClass("magic")) {
    if (this.checked)
      $(".parent input[type='checkbox']:not(.magic)").prop("checked", false).prop("disabled", true);
    else {
      if ($(".parent input.magic[type='checkbox']:checked").length == 0)
        $(".parent input[type='checkbox']:not(.magic)").prop("disabled", false);
    }
  }
});
label {display: block;}
.magic + span {font-weight: bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <label><input type="checkbox" name="check[]" /> <span>Input 1</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 2</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 3</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 4</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 5</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 6</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 7</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 8</span></label>
  <label><input type="checkbox" name="check[]" class="magic" /> <span>Input 9</span></label>
  <label><input type="checkbox" name="check[]" class="magic" /> <span>Input 10</span></label>
  <label><input type="checkbox" name="check[]" class="magic" /> <span>Input 11</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 12</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 13</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 14</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 15</span></label>
</div>

更新：修复了语法错误并添加了标签。添加了视觉提示。一些代码清理完成。

如果您不想添加课程，而只是添加指数，那么，扩展我的答案，你就到了这里：

var indices = [9, 10, 11];

indices.forEach(function (i) {
  $(".parent input[type='checkbox']").eq(i-1).addClass("magic");
});
$(".parent input[type='checkbox']").change(function() {
  if ($(this).hasClass("magic")) {
    if (this.checked)
      $(".parent input[type='checkbox']:not(.magic)").prop("checked", false).prop("disabled", true);
    else {
      if ($(".parent input.magic[type='checkbox']:checked").length == 0)
        $(".parent input[type='checkbox']:not(.magic)").prop("disabled", false);
    }
  }
});
label {display: block;}
.magic + span {font-weight: bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <label><input type="checkbox" name="check[]" /> <span>Input 1</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 2</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 3</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 4</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 5</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 6</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 7</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 8</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 9</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 10</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 11</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 12</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 13</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 14</span></label>
  <label><input type="checkbox" name="check[]" /> <span>Input 15</span></label>
</div>

答案 1 :(得分：1)

尝试在此使用index()和eq ...

首先尝试使用 index() 查找已点击复选框的索引...然后，如果它与条件（9,10或11）匹配，则使用 {{ 3}} 并在复选复选框中添加一个类，以检查匹配+已选中的计数复选框...以后如果此计数变为0，则启用所有复选框

注意： index()和eq()从0开始

＆＃13;
＆＃13; 
$(".parent input[type='checkbox']").each(function() {
  $(this).on("change", function() {
    var index = $(this).closest("label").index();
    if (index === 8 || index === 9 || index === 10) {
      $("input[type='checkbox']").prop("disabled", true);
      $("input[type='checkbox']").eq(8).prop("disabled", false);
      $("input[type='checkbox']").eq(9).prop("disabled", false);
      $("input[type='checkbox']").eq(10).prop("disabled", false);
      $(this).prop("disabled", true);
      if (this.checked) {
        $(this).addClass("matched");
      } else {
        $(this).removeClass("matched");
      }
      if ($(".matched").length === 0) {
        $("input[type='checkbox']").prop("disabled", false);
      }
    }
  })
})
＆＃13; 
label {
  position: relative;
}

span {
  position: absolute;
  top: 100%;
  left: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <label><input type="checkbox" name="check"><span>1</span></label>
  <label><input type="checkbox" name="check"><span>2</span></label>
  <label><input type="checkbox" name="check"><span>3</span></label>
  <label><input type="checkbox" name="check"><span>4</span></label>
  <label><input type="checkbox" name="check"><span>5</span></label>
  <label><input type="checkbox" name="check"><span>6</span></label>
  <label><input type="checkbox" name="check"><span>7</span></label>
  <label><input type="checkbox" name="check"><span>8</span></label>
  <label><input type="checkbox" name="check"><span>9</span></label>
  <label><input type="checkbox" name="check"><span>10</span></label>
  <label><input type="checkbox" name="check"><span>11</span></label>
  <label><input type="checkbox" name="check"><span>12</span></label>
  <label><input type="checkbox" name="check"><span>13</span></label>
  <label><input type="checkbox" name="check"><span>14</span></label>
  <label><input type="checkbox" name="check"><span>15</span></label>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您可以将类添加到要禁用的复选框，如下所示。

$(document).ready(function() {
  $(function() {
    $("input[type='checkbox']").change(function() {
      if (this.checked) {
        if (this.value == 'example9' || this.value == 'example10' || this.value == 'example11') {
          $('.test').attr('disabled', true);
        }
      } else {
        if (this.value == 'example9' || this.value == 'example10' || this.value == 'example11') {
          if ($("input[type='checkbox']:not(.test):checked").length == 0)
             $('.test').removeAttr('disabled');
        }
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' value='example1' class='test' />1</br>
<input type='checkbox' value='example2' class='test' />2</br>
<input type='checkbox' value='example3' class='test' />3</br>
<input type='checkbox' value='example4' class='test' />4</br>
<input type='checkbox' value='example5' class='test' />5</br>
<input type='checkbox' value='example6' class='test' />6</br>
<input type='checkbox' value='example7' class='test' />7</br>
<input type='checkbox' value='example8' class='test' />8</br>
<input type='checkbox' value='example9' />9</br>
<input type='checkbox' value='example10' />10</br>
<input type='checkbox' value='example11' />11</br>
<input type='checkbox' value='example12' class='test' />12</br>
<input type='checkbox' value='example13' class='test' />13</br>

相关问题
最新问题