テキストボックスが空であるかどうかに応じてボタンを無効または有効にする方法はありますか？

Question

私は自分のanglejsプロジェクターで働いています。

テンプレートに2つの入力テキスト要素があります。

ボタンは、2つの入力ボックスに文字列がある場合にのみ有効にする必要があります。ここで

は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から見ることができます。ボタンは、テキストボックスが最初に文字列しかない場合にのみ有効です。それらはdisalbledされる。

少なくとも1つのテキストボックスが空の場合、どのようにボタンを無効にすることができますか？

Answer 1

最初にUserNameとPasswordがnullです。それでうまくいく。しかし、あなたが何かをタイプして削除すると、それらは空になり、それがうまくいきません。

真実を確認するために変更しました。

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

Answer 2

あなたはinputフィールドのng-requiredと$無効なプロパティを使用する必要があります。

チェックこのコード：

あなただけ、あなたの入力要素に必要なNG-必要なの必要を使用し、その後、NG-無効=使用することができ、あなたのボタンの属性として

<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

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