Question

我正在尝试实现一个脚本，一旦选中复选框，就会启用提交按钮。

我正在关注此处的示例：http://jsfiddle.net/chriscoyier/BPhZe/76/

我已将以下java脚本代码添加到我的页面中，但似乎脚本没有正确执行。但是我没有在控制台中看到任何错误。

<!---JQuery Iniialization --->
<link rel="stylesheet"    href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$( document ).ready(function() {
    var checkboxes = $("input[type='checkbox']"),
        submitButt = $("input[type='submit']");

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

表格代码：

 <FORM ACTION="signature_action.cfm?ticket_id=#url.ticket_id#&device=pc" METHOD=POST NAME="SigForm">

      <div align="center">
      <h2>STEP 1</h2>
      <strong>Select the type of signature that is being captured:</strong><br />
       <table><tr><td align="left"> 
                            <div id="format">
                            <input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
                            <label for="check1"><span class="style1">Equipment Dropped Off &nbsp; &nbsp; </span></label>
                            <span class="style1">
                            <input name="work" type="checkbox" id="check2" value="work"/>
                            <label for="check2">Work performed &nbsp; &nbsp; </label>
                            <input name="payment" id="check3" type="checkbox" value="payment" />
                            <label for="check3">Payment Recieved &nbsp; &nbsp; </label>
                            <input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
                            <label for="check4">Equipment Picked Up</label>
                            </span><br />
                            <input name="tech_name" type="hidden" value="#url.tech_name#">
                            </div>
                            <input name="hidden" type="hidden" value="#url.tech_name#">

<input type="submit" name="submit" value="STEP 4 - SAVE SIGNATURE" disabled>
</form>

我是javascript的新手，我有点蠢蠢欲动。一旦DOM准备就绪，是否需要运行？（我不知道该怎么做！）

有人能指出我正确的方向吗？

Answer 1

必须收听的事件是“改变”。

$( document ).ready(function() {
  var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

  checkboxes.on('change', function() {
    submitButt.attr('disabled', !this.checked);
  });
});

Answer 2

根据这篇文章：How to add onDomReady to my document?，我把我的代码放在里面：

window.onload = function() {
//code here
}

文档加载时运行javascript

2 个答案: