我有一个 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;"> </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;"> </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>输入或表单输入。