Wie aktiviert man Textfelder in anderen Textfeldern?

Ich benutze angularjs für mein Formular, als Formular laden möchte ich einige Felder deaktivieren, nach einem Klick auf ein Textfeld deaktivieren Felder sollten aktiviert werden. Ich kämpfe sehr viel, bitte hilf mir das zu lösen. hier ist mein HTMLWie aktiviert man Textfelder in anderen Textfeldern?

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

Ich möchte auf Platz alle Felder nach Ort und als Benutzer Fokus deaktivieren, so deaktivieren Feld ermöglichen sollte.

Quelle

2016-09-01 Abhay Sharma

Es gibt zu viel Code Bitte nur nur essentiellen Code, der erforderlich ist, um das Problem zu demonstrieren. – jcubic

Ich werde Ihnen ein sehr einfaches Beispiel für Ihre problem.Wenn Sie eine Eingabe Textfeld deaktivieren, wird es keine Ereignisse erfassen. Sie können eine Sache setzen Eingabe Element innerhalb einer div und dann rufen Sie Ihre Funktion für aktivieren Sie es.

Ich habe einen Code dafür geschrieben.

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

Quelle

2016-09-01 08:33:59

Danke, dass es für mich funktioniert. –

Versuchen:

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

aber dies wird nur für Formularelemente funktionieren, wenn Sie Link deaktivieren möchten, müssen Sie dies verwenden:

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

Quelle

2016-09-01 08:16:15 jcubic

Wie kann ich Sie verwenden Code in Signup –

@AbhaySharma ng-deaktiviert arbeiten nur auf Formularfelder, wenn Sie Links haben, können Sie versuchen, verwenden ng-click = "signupForm. $ Invalid && signup()" ' – jcubic

es sollte sei '$ valid' – jcubic

Wie aktiviert man Textfelder in anderen Textfeldern?

Antwort

Verwandte Themen