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>

Answer 2

您不需要each函数，因为只有一个文本字段。另外，在这种情况下你如何解决更新？这通常需要像keyup事件那样。您还可以使用prop函数（在较新版本的jQuery中）设置disabled属性。

这样的东西应该有效（在jQuery 1.6 +中）：

$("#firstNameCriteria").keyup(function() {
  if($(this).val() == '') {
    $("#middleNameCriteria").addClass('ui-disabled');
    $("#middleNameCriteria").prop("disabled", true);
  } else {
    $("#middleNameCriteria").removeClass('ui-disabled');
    $("#middleNameCriteria").prop("disabled", false);
  }
});

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

2 个答案: