jquery - 如果前一个字段留空，则尝试禁用文本输入字段

Question

如果未先填写名字字段，我正在努力禁用中间名字段。我有以下代码，它在我的 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');
      }
  });

Answer 1

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>