如果前一个输入框为空，尝试禁用文本输入框

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');
      }
  });

- tjoenz

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>

- Jasper

---

这个代码在Jasper上可以工作，但是在页面加载时输入框并没有被禁用。所以我加了一个class='ui-disabled'来禁用中间名字输入框。非常感谢！我现在会去阅读你提供的链接 :) - tjoenz

Answer 2

你不需要使用each函数，因为只有一个文本字段。另外，在这种情况下，你如何触发更新？通常需要在类似于keyup事件上进行。你还可以使用prop函数（在较新版本的jQuery中）设置禁用属性。

类似于以下代码应该可以工作（在 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);
  }
});

- GSto

---

谢谢，我没想到需要“each”，但找不到适合的方法。这里也不起作用。如果名字为空，中间名字段仍然可以被选择。不确定你说的“how are you firing the updates”是什么意思。 - tjoenz