如何根据文本框是否为空来禁用或启用按钮？

Question

我在我的angularjs projerct上工作。

我有我的模板和两个输入文本元素按钮。

按钮都被启用，只有当两个输入框有一些字符串。

下面是HTML代码：

<form id="loginform" class="form-horizontal" role="form"> 
     <div style="margin-bottom: 25px" class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
      <input id="login-username" type="text" class="form-control" ng-model="UserName" placeholder="UserName"> 
     </div> 
     <div style="margin-bottom: 25px" class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
      <input id="login-password" type="text" class="form-control" ng-model="Password" placeholder="Password"> 
     </div> 

     <div style="margin-top:10px" class="form-group pull-left"> 
      <div class="col-sm-12 controls"> 
       <input type="button" 
         class="btn btn-success" 
         value="enter" 
         ng-click="inspectorArea.verify(UserName,Password)" 
         ng-disabled="(UserName == null || Password == null)"> 
      </div> 
     </div> 
    </form> 

，并在这里工作plunker。

在输入按钮元件使用此行ng-disabled="(UserName == null || Password == null)我禁用或启用按钮。

但是它不能正常工作，你可以从plunker-example中看到，仅当文本框第一次具有字符串时才启用按钮，如果我从其中一个文本中删除字符串框元素按钮启用，而我想要他们是不对的。

任何想法，我怎么可以禁用按钮，如果文本框至少有一个是空的？

Answer 1

最初UserName和Password为空。所以它会起作用。但是当你输入一些东西并删除时，它们就会变成空的，这就是为什么它不起作用。

我修改了它来检查真实性。

<input type="button" 
         class="btn btn-success" 
         value="enter" 
         ng-click="inspectorArea.verify(UserName,Password)" 
         ng-disabled="(!UserName || !Password)"> 

Answer 2

，您应该使用input领域的ng-required和$无效的属性。

检查这个代码：

<form name="loginform" id="loginform" class="form-horizontal" role="form"> 
     <div style="margin-bottom: 25px" class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
      <input name="uname" ng-required="true" id="login-username" type="text" class="form-control" ng-model="UserName" placeholder="UserName"> 
     </div> 
     <div style="margin-bottom: 25px" class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
      <input name="pass" ng-required="true" id="login-password" type="text" class="form-control" ng-model="Password" placeholder="Password"> 
     </div> 

     <div style="margin-top:10px" class="form-group pull-left"> 
      <div class="col-sm-12 controls"> 
       <input type="button" 
        class="btn btn-success" 
        value="enter" 
        ng-click="inspectorArea.verify(UserName,Password)" 
        ng-disabled="loginform.uname.$invalid || loginform.pass.$invalid"> 
      </div> 
     </div> 
    </form> 

Answer 3

你可以使用需要您的输入内容，不需要NG-需要，然后用NG-禁用=“yourFormName $无效的。”作为您的按钮属性元件。为此，您必须为每个输入元素分配name =“yourInputNames”。

Answer 4

只需添加一个ID按钮，这将工作动态：

<script> 
    $(document).ready(function(){ 

     $('#the_submit').prop('disabled','true'); 
     $('#the_submit').attr('title','text boxes are empty'); 
    }); 
    $(document).ready(function() { 
     $('#login_password').keyup(function(){ 
      var val = $.trim($("#login_password").val()); 
      var val2 = $.trim($("#login_username").val()); 

      if (val != "" && val2 != "") { 
      $('#the_submit').removeAttr('disabled'); 
      $('#the_submit').attr('title','Good To Go'); 
      } 
     }); 
    }); 
    $(document).ready(function() { 
     $('#login_password').keyup(function(){ 
      var val = $.trim($("#login_password").val()); 
      var val2 = $.trim($("#login_username").val()); 

      if (val == "" || val2 == "") { 
      $('#the_submit').prop('disabled','true'); 
      $('#the_submit').attr('title','Edit Must Be Documented'); 
      } 
     }); 
    }); 
    </script>"; 
} 

// Here is your button, give it an id 
<input type="submit" id="the_submit">