我需要javascript checkboxes.click(function())在页面首次加载时启动

I need the javascript checkboxes.click(function()) to start when the page first loads

本文关键字：加载 启动 checkboxes javascript click function      更新时间：2023-09-26

我使用以下js代码禁用表单提交按钮，直到至少一个复选框选择被选中。

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");
checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

问题是当页面第一次加载时代码不工作。当用户第一次进入页面时，他可以单击提交，但如果他选中了某些内容，然后取消选中所有内容，那么提交就被禁用了。

看起来我需要在页面第一次加载时启动代码。有什么建议吗?

添加submitButt.attr("disabled", !checkboxes.is(":checked"));首先禁用提交按钮。此外，最好将其包装在domready或onload中，以确保jQuery可以访问完全渲染的DOM。

$(function() {
  var checkboxes = $("input[type='checkbox']"),
          submitButt = $("input[type='submit']");
  checkboxes.click(function() {
      submitButt.attr("disabled", !checkboxes.is(":checked"));
  });
  
  // Add this line to set init status of the submit.
  // submitButt.attr("disabled", true)); is ok as you don't have any checked checkbox when page loaded.
  submitButt.attr("disabled", !checkboxes.is(":checked"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" id="c1"/ >c1
<input type="checkbox" id="c2"/ >c2
<input type="checkbox" id="c3"/ >c3
<input type="submit" value="click" />

因为你是使用jQuery使用它的ready函数:

$(document).ready(function(){
    var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");
    checkboxes.click(function() {
        submitButt.attr("disabled", !checkboxes.is(":checked"));
    });
});

这样代码只会在页面加载并且jQuery准备好时执行。因此，点击处理程序可以在实际存在的复选框上设置。

2个选项:1)在你的HTML代码中添加属性"disabled";2)使用这个代码

document.addEventListener("DOMContentLoaded", function(event) { 
    var checkboxes = $("input[type='checkbox']"),
        submitButt = $("input[type='submit']");
    checkboxes.click(function() {
        submitButt.attr("disabled", !checkboxes.is(":checked"));
    });
});

您可以使用以下命令:

window.onload = function () {
      submitButt.attr("disabled", !checkboxes.is(":checked"));
}

…并将内容外化到onload和checkboxes。click函数中

只需创建一个函数，并在页面加载和点击支票簿时调用它。

注意:你可以修改函数名

请检查下面的代码片段:

var checkboxes = $("input[type='checkbox']");
var submitButt = $("input[type='submit']");
var onloadCheckboxesCheck = function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
}
onloadCheckboxesCheck();
checkboxes.click(function() {
   onloadCheckboxesCheck();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="lname">
    <input type="checkbox" name="lname">
        <input type="checkbox" name="lname">
            <input type="checkbox" name="lname">
  <input type="submit" value="Submit">

你所需要做的就是触发事件:

$(function() {
  $('input[type=checkbox]').on('change', function(e) {
    $('input[type=submit]').prop('disabled', 0 === $('input[type=checkbox]:checked').length);
  }).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="submit" />

  • .trigger('change')将触发复选框上的更改事件。
  • $('input[type=checkbox]:checked')将给你checked列表，复选框
相关文章：