使用jquery在加载时选中复选框时如何禁用所有输入

如何解决使用jquery在加载时选中复选框时如何禁用所有输入?

如果 input 未选中 - 在页面加载时,我希望禁用每个 trcheckBox。据我了解,我必须调用一个函数来检查 checkBox 是否被选中。但正如我下面的代码一样,它不起作用。

$(function() {
  fn_chkBox('.form-check-input'); //see if checked on load
  function fn_chkBox() {
    if ($(this).is(':checked')) {
      $(this).closest("tr").find("input.form-control").prop("disabled",false);
    } else {
      $(this).closest("tr").find("input.form-control").prop("disabled",true);
    }
  }
});

$(".form-check-input").change(function() {
  if ($(this).is(':checked')) {
    $(this).closest("tr").find("input.form-control").prop("disabled",false);
  } else { //unchecked
    $(this).closest("tr").find("input.form-control").prop("disabled",true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkBox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkBox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkBox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

如果 input 为空,我希望在加载时禁用每行 tr 中的所有 checkBox

解决方法

您可以使用 .form-check-input:not(:checked) 选择器选择所有未选中的复选框。

$(function() {
  $('.form-check-input:not(:checked)').closest("tr").find("input.form-control").prop("disabled",true);
});

$(".form-check-input").change(function() {
  if ($(this).is(':checked')) {
    $(this).closest("tr").find("input.form-control").prop("disabled",false);
  } else { //unchecked
    $(this).closest("tr").find("input.form-control").prop("disabled",true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

,

要执行您的要求,您只需在页面加载时trigger() 复选框上的 change 事件处理程序即可。

这里要注意另外两件事。首先,可以通过向 checked 调用提供反向 prop('disabled') 属性状态来简化那里的逻辑。其次,将事件处理程序放在 document.ready 之外时要小心。如果您将 jQuery 代码放在页面的 head 中,您会遇到未绑定事件的问题。

说了这么多,试试这个:

jQuery($ => {
  $(".form-check-input").on('change',e => {
    $(e.target).closest('tr').find('input.form-control').prop('disabled',!e.target.checked);
  }).trigger('change');
});
.form-control { width: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

,

您可以利用现有的功能,并在加载时触发“更改”事件。您还可以通过将禁用设置为 !$(this).is(':checked')

来缩短您的功能

$(function() {
  $('input[type=checkbox]').trigger('change')
});

$(".form-check-input").change(function() {
  $(this).closest("tr").find("input.form-control").prop("disabled",!$(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

其他编程问答

如何捕获不存在的属性的错误?示例: const arr = [ { neighbours: [➯G', ɼNG'], },]; 现在,当我试图访问一个可能存在也可能不存在的属...
在setState上,我收到以下TS错误: “类型ɺxiosResponse‘缺少类型’countries[]‘的以下属性:长度、pop、push、concat和26 more.ts(2740)”...
我是typescript的新手,正在尝试为Typescript构建一个react样板。但无法导入格式为“.tsx”的组件。 我的tsconfig文件如下所示: { "compilerOption...
当我在VS代码中使用Jupyter Notebook时,我遇到了一个问题。屏幕显示"Python 3.7.8 requires ipykernel to be installed“。我按照弹出窗口的...
我正在尝试输入一个形状为( 1,8,32,32,32 )的5D张量到我写的VAE: self.encoder = nn.Sequential( nn.Conv3d( 8, 16, 4...
在控制器中: RefreshController refreshController = RefreshController(initialRefresh: false); @overrid...
我试图构建我的安卓应用程序有一段时间了,似乎找不到任何解决这个问题的方法:Image Unity版本: Unity 2020.3.21f1 (64位) JDK、SDK、NDK和Gradle是Unit...
我正在尝试测试selenium,以获得自动登录网站的解决方案,但我甚至无法让Selenium保持打开状态。它做它现在应该做的事情,然后在没有driver.quit()的情况下立即退出。我得到了以下错...
我正在尝试开发一个springboot/react应用程序,并且已经安装了react并创建了react项目。但是,当我尝试执行以下命令时: npm run 我得到以下错误: Lifecycle sc...
我有大约5e9 (15e4记录每小时)记录存储在clickhouse中。这些记录是按时间顺序的。当我以10分钟的time_range运行某个查询时: select * from table_name...
Could not load library cudnn_cnn_infer64_8.dll. Error code 126Please make sure cudnn_cnn_infer64_8...
我正在和gatsby一起创建一个新项目 gatsby new YourProjectName2 https://github.com/Vagr9K/gatsby-advanced-starter 并...