带有保存和提交按钮的 2 列表单,并尝试禁用提交按钮,直到表单完成


2 column form with a save and submit button and am trying to disable the submit button until form is complete

我有一个 2 列表单,我尝试使用div 和表格构建它有一个保存和提交按钮,我正在尝试使用 javascript 禁用提交按钮,直到表单完成。是因为表格中有 DIV 吗?

这是 html:

<div style="float:left;  width:450px;">
<form class="form" name="parts" method="post" >
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">&nbsp;</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;">SET PART #</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;">INSTALL DATE</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">1.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part1"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part1-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">2.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part2"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part2-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">3.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part3"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part3-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">4.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part4"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part4-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">5.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part5"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part5-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">6.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part6"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part6-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">7.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part7"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part7-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">8.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part8"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part8-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">9.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part9"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part9-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">10.</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="text" id="part10"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input type="text" id="part10-install-date"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:35px;">&nbsp;</div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:187px;"><input type="submit" name="save" value="Save"></div>
  <div style="float:left; padding-right:7px; padding-bottom:7px;  width:192px;"><input class="send" id="register" type="submit" value="Send" disabled="disabled"></div>
</form>
</div>

这是javascript:

(function() {
$('form > input').keyup(function() {
    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });
    if (empty) {
        $('#register').attr('disabled', 'disabled'); 
    } else {
        $('#register').removeAttr('disabled'); 
    }
});
})()

选择器"表单>输入"表示输入作为表单的第一级子级。

正如您所说,因为输入位于div 内部,因此是表单的二级子级。

尝试表单>div>输入或表单输入。