如果未先填写名字字段,我正在努力禁用中间名字段。我有以下代码,它在我的 jQuery Mobile 应用程序中禁用了此功能,但即使名字为空,并且如果填写了名字字段,中间名字段仍保持灰色,输入仍然能够添加文本。任何帮助是极大的赞赏。谢谢!
HTML:
<form id="search-form" name="search-form" method="post">
<div class="formBox">
<div data-role="fieldcontain">
<label for="firstName">First Name</label><br/>
<input type="text" name="firstname" id="firstNameCriteria" value="" />
</div>
<div data-role="fieldcontain">
<label for="middleName">Middle Name</label><br/>
<input type="text" name="middleName" id="middleNameCriteria" value="" />
</div>
<div data-role="fieldcontain">
<label for="lastName">Last Name <span class="required">(Required - Must be exact match)</span></label><br/>
<input type="text" name="lastname" id="lastNameCriteria" value="" />
</div>
</div>
</div>
</form>
JS:
$('#firstNameCriteria').each(function() {
if ($(this).val() == '') {
$('#middleNameCriteria').addClass('ui-disabled');
$('#middleNameCriteria').disable('input');
} else {
$('#middleNameCriteria').removeClass('ui-disabled');
}
});
最佳答案
jQuery Mobile 有自己的帮助程序方法,用于禁用/启用已由 jQuery Mobile 框架初始化的表单元素: http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/textinputs/methods.html
//bind event handler to first text input
$('#firstNameCriteria').bind('keyup', function () {
//enable or disable the next element based on the value of this one
var state = (this.value == '') ? 'disable' : 'enable';
$("#middleNameCriteria").textinput(state);
});
这是一个演示:http://jsfiddle.net/ycUnv/
您可以使用任何您喜欢的事件; change
一旦文本输入模糊且其值发生更改,将触发,keyup
将在用户按下某个键并且输入的值更新后立即触发。
此外,您的 HTML 有一个额外的结尾 </div>
标签,它应该是这样的:
<form id="search-form" name="search-form" method="post">
<div class="formBox">
<div data-role="fieldcontain">
<label for="firstName">First Name</label><br/>
<input type="text" name="firstname" id="firstNameCriteria" value="" />
</div>
<div data-role="fieldcontain">
<label for="middleName">Middle Name</label><br/>
<input type="text" name="middleName" id="middleNameCriteria" value="" />
</div>
<div data-role="fieldcontain">
<label for="lastName">Last Name <span class="required">(Required - Must be exact match)</span></label><br/>
<input type="text" name="lastname" id="lastNameCriteria" value="" />
</div>
</div>
</form>
关于jquery - 如果前一个字段留空,则尝试禁用文本输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9929817/