Question

我在我的angularjs项目上工作。

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

只有当两个输入框有一些字符串时才需要启用该按钮。

这是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

您应该使用ng-required字段的input和$ invalid属性。

检查此代码：

  <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

您可以在输入元素上使用required，不需要ng-required然后使用ng-disabled =＆＃34; yourFormName。$ invalid＆＃34;作为按钮元素的属性。要做到这一点，你必须指定name =＆＃34; yourInputNames＆＃34;每个输入元素。

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">

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

4 个答案: