带有保存和提交按钮的 2 列表单，我试图禁用提交按钮直到表单完成

Question

我有一个 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'); 
    }
});
})()

Answer 1

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

如您所述，因为输入在 div 内，因此是表单的第二级子级。

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

带有保存和提交按钮的 2 列表单，我试图禁用提交按钮直到表单完成

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

javascript

php

forms