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

Question

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

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

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

问题是代码在页面首次加载时不起作用。当用户第一次来到这个页面时，他可以点击提交，但是如果他选中了一些东西然后取消选中所有的东西，那么提交就会被禁用。

看来我需要在页面首次加载时启动的代码。有什么建议吗？

Answer 1

由于您正在使用 jQuery，请使用其 ready 功能：

$(document).ready(function(){

    var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

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

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

Answer 2

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"));
    });
});

Answer 3

您可以使用以下内容：

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

... 并将内容外化到一个函数中，该函数被调用用于 onload 和 checkboxes.click.

Answer 4

首先添加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" />

Answer 5

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

注意：您可以更改函数名称。

请检查以下代码片段：

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">

Answer 6

你只需要触发事件：

$(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、复选框列表

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

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

html

javascript

checkbox

jquery

pageload