尝试禁用文本输入字段，如果前面的字段留空

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中）设置禁用的属性。

像这样的东西应该工作（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); 
    } 
});