使用“全选”时排除禁用的复选框

2024-02-26

我在表中有带有标签的复选框。我在表“全选”之外添加了一个复选框,ID 为“chkbox”。现在下面的代码工作正常。这是 选择和取消选择表中的所有复选框。现在有一些页面由于业务逻辑而禁用了一些复选框。我希望这些复选框不应该受到影响。

<script type="text/javascript">
var s = jQuery.noConflict();
s(document).ready(function() {
    s('#chkbox').change(function() {
        var all = s('table').find('input[type="checkbox"]');
        if (this.checked) {
            all.prop('checked', true);
        } else {
            all.prop('checked', false);
        }
    });
});
</script>

Use :not() https://api.jquery.com/not-selector/ with :disabled https://api.jquery.com/disabled-selector/选择器。

var all = $('table').find('input[type="checkbox"]:not(:disabled)');
                                                 ^^^^^^^^^^^^^^^^

这不会选择禁用的复选框

$('#selectAll').change(function() {
  $(':checkbox:not(:disabled)').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" />Select All

<ul>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
</ul>

您还可以使用:enabled https://api.jquery.com/enabled-selector/选择器。

$('table').find('input[type="checkbox"]:enabled')
$('#selectAll').change(function() {
  $(':checkbox:enabled').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" /> Select All

<ul>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" />Not disabled</li>
  <li>
    <input type="checkbox" disabled />
  </li>
  <li>
    <input type="checkbox" />Not disabled</li>
</ul>

注意::enabled == :not(:disabled)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用“全选”时排除禁用的复选框 的相关文章

  • React/Redux bundle.js 太大

    我有一个小型的 React 项目 Webpack生成的bundle js大小为6 3Mb 如何将大小减小到 github webpack config js module exports devtool inline source map
  • 如何在提交表单之前删除自动数字格式?

    我正在使用 jQuery 插件自动数字 http www decorplanit com plugin 但是当我提交表单时 我无法删除之前字段上的格式POST 我尝试使用 input autonumeric destroy 和其他方法 但它
  • VS 2010 Web应用程序中的ASP.NET Web Api CRUD操作

    我尝试在 VS 2010 Web 应用程序中进行 ASP NET Web Api CRUD 操作 但为什么结果没有从源表返回所有整行 这是我的代码 路线 Globax asax protected void Application Star
  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co
  • TRACKER:错误TRK0005:无法找到:“CL.exe”。该系统找不到指定的文件

    我尝试在 Windows 8 上的 Node js 项目中执行以下命令 npm 安装 电子邮件受保护 cdn cgi l email protection 但我收到一个错误 我不知道如何处理 TRACKER 错误TRK0005 无法找到 C
  • Rails 递归地包含 javascripts 资源文件夹

    我了解如何将一个 JavaScript 文件添加到 Rails 资产管道中 只需添加 require filename 到 application js 但是如何在一个文件夹下包含多个 javascript 文件 vendor assets
  • canvas.getContext('2D') 返回空值

    我创建了一个画布并将其命名为getContext 方法 但它返回null为上下文 这是我使用的代码 我在控制台中得到了这个
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • 更新 Google 地图流量层而无需重新加载页面

    我的页面中嵌入了 Google 地图 我使用 initMap js 函数来初始化地图 function initMap var map new google maps Map document getElementById t map zo
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 删除 Laravel Mix 中的临时文件

    我想在 laravel mix 构建期间或之后删除临时构建文件 这是我目前拥有的一些代码 但是del不工作 const mix require laravel mix const del require del compile sass i
  • 如何创建增量加载网页

    我正在编写一个处理大量数据的页面 它会永远持续到我的结果页面加载 几乎无限 因为返回的数据太大了 因此 我需要实现一个增量加载页面 例如 url 中的页面 http docs python org http docs python org
  • 无法在渲染器进程中使用 Node.js API

    无法在 Electron 中使用任何与 Electron 或节点相关的操作 未定义获取错误过程 我检查了他们指导添加节点支持的各个地方 但这已经完成了 所以卡在这里 我的主要应用程序代码是 const electron require el
  • 从相机视图中拖动锁定在一定距离/半径处的对象

    我在场景中心有一个相机 距离相机 z 400 处有 1 个球体 其父级位于中心 我想从视图中向上 向下 向左 向右拖动球体 但同时不改变它相对于中心的 z 位置 我最终使用了另一个球体并使其不可见 添加side THREE DoubleSi
  • ReferenceError 和全局对象

    在浏览器中的 JavaScript 中window是全局对象 这意味着在全局范围内定义的每个变量都是window 那么为什么我会得到这个结果 console log window foo No error logs undefined co
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • openssl_pkey_get_details($res) 不返回公共指数

    我在用着这个例子 https stackoverflow com a 12575951 2016196使用 php 生成的密钥进行 javascript 加密openssl图书馆 但是 details openssl pkey get de
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐