他のテキストフィールドでテキストフィールドを有効にするには？

フォームのロードとしてフォームにanglejsを使用しています。テキストフィールドをクリックした後に一部のフィールドを無効にしたいとします。無効にする必要があります。私はそれを解決するために私を助けてください多くの私は苦労しています。ここに私のHTML他のテキストフィールドでテキストフィールドを有効にするには？

<!doctype html> 
 
<html lang="en" ng-app="signup"> 
 
<head> 
 
\t <title>Sign Up</title> 
 
\t <jsp:include page="/WEB-INF/pages/app/cmn/cmnIncludes.jsp" /> 
 
\t <%-- Including login_controller.js file 
 
\t - Date: 30Aug2016 | Author(s): Abhay Sharma --%> 
 
\t <script type="text/javascript" src="/static/app/components/signup/signup_controller.js"></script> 
 
\t <%-- Including login_service.js file 
 
\t - Date: 30Aug2016 | Author(s): Abhay Sharma --%> 
 
\t <script type="text/javascript" src="/static/app/components/signup/signup_service.js"></script> 
 
\t 
 
\t <%--Including location.js --%> 
 
\t <script type="text/javascript" src="/static/assets/js/location.js"></script> 
 
\t 
 
\t 
 
\t <%--Loading the library for Google place Autocomplete --%> 
 
\t <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAD6LkAYd9yRpx5YlhRaRYbJClMutkxvpg&libraries=places&callback=initAutocomplete" 
 
     async defer></script> 
 
\t 
 
</head> 
 

 
<body class="index-page signup-page"> 
 
\t <!-- Navbar --> 
 
\t <jsp:include page="/WEB-INF/pages/app/cmn/header.jsp" /> 
 
\t <!-- end navbar --> 
 

 
\t <!-- content: signup --> 
 
    <div class="wrapper headerMargin" ng-controller="signupController"> 
 
\t \t <div class="header header-filter" style="background-image: url('../assets/img/city.jpg'); background-size: cover; background-position: top center;"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-md-8 col-md-offset-2 col-sm-offset-2"> 
 
\t \t \t \t \t \t <div class="card card-signup"> 
 
\t \t \t \t \t \t \t <form class="form" method="" action="" name="signupForm"> 
 
\t \t \t \t \t \t \t \t <div class="header header-primary text-center"> 
 
\t \t \t \t \t \t \t \t \t <h4>Sign Up</h4> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="content"> 
 
\t \t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t \t <div class="col-md-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">face</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" placeholder="Person Name" ng-model="user.personName" required> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">business</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" placeholder="Firm Name" ng-model="user.firmName" required> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">email</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="email" class="form-control" placeholder="Email" ng-model="user.email" required> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">lock_outline</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="password" placeholder="Password" class="form-control" ng-model="user.password" required/> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">call</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="tel" class="form-control" placeholder="Phone Number" ng-model="user.number" required /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group" id="locationField"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">place</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" id="autocomplete"class="form-control" placeholder="Location" ng-model="user.place" onFocus="geolocate()" required="required" /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t <div class="col-md-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <!-- <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" ng-disable="" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t placeholder="Street Address 1" id="street_number"ng-model="streetAddr1" required="required" /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <!-- <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" ng-disable="" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t placeholder="Street Address 2" id="route"ng-model="streetAddr2" required="required" /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <!-- <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" ng-disable="" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t placeholder="City" id="locality" ng-model="city" required="required" /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <!-- <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" ng-disable="" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t placeholder="State" id="administrative_area_level_1" ng-model="state" required="required" /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <!-- <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" ng-disable="" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t placeholder="Zip Code" id="postal_code" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t ng-model="zip" required="required" /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <!-- <span class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </span> --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <input type="text" class="form-control" ng-disable="" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t placeholder="Country" id="country" ng-model="country" required="required" /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <!-- If you want to add a checkbox to this form, uncomment this code 
 
\t \t \t \t \t \t \t \t \t <div class="checkbox"> 
 
\t \t \t \t \t \t \t \t \t \t <label> 
 
\t \t \t \t \t \t \t \t \t \t \t <input type="checkbox" name="optionsCheckboxes" checked> 
 
\t \t \t \t \t \t \t \t \t \t \t Subscribe to newsletter 
 
\t \t \t \t \t \t \t \t \t \t </label> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t --> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="footer text-center"> 
 
\t \t \t \t \t \t \t \t \t <a href="#pablo" class="btn btn-simple btn-primary btn-lg" 
 
\t \t \t \t \t \t \t \t \t \t ng-click="signup()" ng-disabled="signupForm.$invalid">Signup</a> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </form> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <!-- footer --> 
 
\t <jsp:include page="/WEB-INF/pages/app/cmn/footer.jsp" /> 
 
\t <!-- end footer --> 
 
\t \t </div> 
 
\t </div> 
 
\t <!-- end content --> 
 
\t 
 
\t 
 
</body> 
 
</html>

私は場所後とPlace上のユーザ焦点としてすべてのフィールドを無効にしたいので、無効フィールドが使用可能にする必要があります。

出典

2016-09-01 Abhay Sharma

コードが多すぎます。問題を示すために必要な必須コードのみを含めてください。 – jcubic

を私はあなたのためにあなたに非常に簡単な例を与えます入力のテキストボックスを無効にすると、イベントはキャプチャされません。あなたは入力要素をdivに入れて、それを有効にする関数を呼び出すことができます。

私はこのコードを書いたことがあります。

<!DOCTYPE html> 
<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <body> 
     <div ng-app="myApp" ng-controller="myCtrl"> 
     Click to enable 
     <div ng-click="enableMe()" > 
      <input type="text" ng-model="name" id="inputbox" disabled > 
     </div> 
     </div> 
     <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function($scope) { 
      $scope.enableMe = function(){ 
       var element = angular.element(document.querySelector('#inputbox')); 
       element.removeAttr("disabled"); 
      } 

     }); 
     </script> 
    </body> 
</html>

出典

2016-09-01 08:33:59

私のために働いてくれてありがとう。 –

試してみてください。

<button ng-click="enabled = true"> 
<input ng-disabled="!enabled"/>

が、これが唯一のあなたは、あなたがこれを使用する必要がリンクを無効にしたい場合は、フォーム要素のために動作します：

<a ng-click="enabled && fun()">foo</a>

出典

2016-09-01 08:16:15 jcubic

どうすればいいですか？ Signup –

@AbhaySharma ng-disabledは、ng-click = "signupForm"を使用しようとすると、フォームフィールドのみで動作します。$無効&& signup（） "' – jcubic

'$ valid'にしてください – jcubic

他のテキストフィールドでテキストフィールドを有効にするには？

答えて

関連する問題