个人中心
gpt4 book ai didi

javascript - 如果用户单击不同的按钮，则禁用表单元素

转载 作者：行者123 更新时间：2023-11-28 06:10:32 24 4
gpt4 key购买 nike

我有这 2 个按钮，它链接到相同的模态表单。这是表格。

<form name="addUser" ng-submit="(addUser.$valid) ? add() : '';">

    <div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
     <label class="control-label" for="username">Username</label>
       <input class="form-control" name="username" ng-model="user.username" required>
        <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

    <div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
      <label class="control-label" for="name">Name</label>
       <input class="form-control" name="name" ng-model="user.name" required>
         <span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

     <div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
      <label class="control-label" for="password">Password</label>
       <input type="password" class="form-control" name="password" ng-model="user.password" required ng-minlength="5">
         <span class="glyphicon form-control-feedback" ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

     <div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
       <label class="control-label" for="confirmpassword">Re-enter Password</label>
         <input type="password" class="form-control" name="confirmpassword" ng-model="user.confirmpassword" required ng-minlength="5">
           <span class="glyphicon form-control-feedback" ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>

这是按钮。

<div class="col-md-2">
   <button type="button" class="btn btn-primary" ng-click="addUser()">Add New User</button>
    </div>

我想要的是，当用户单击此按钮(如下)时，表单中的密码和确认密码将不会出现。

<a ng-click="addUser(user)" class="btn"><i class="glyphicon glyphicon-edit"></i></a>

如何禁用该元素？

这是js代码

$scope.addUser = function(user) {
        $dialog.open({
            showClose: false,
            closeByEscape: true,
            template: 'views/user/user-user-add.html',
            controller: ['$scope', function ($dialogScope) {
                $dialogScope.isLoading =false;
                $dialogScope.title = "New User";
                $dialogScope.user = {
                    username : "" ,
                    name : "",
                    password :"",
                    confirmpassword :"",
                    status : "",
                    scope : {},
                };
                if(user){
                    $dialogScope.title = "Update User";
                    $scope.hideField = true;
                    $dialogScope.user = {
                        username :user.username ,
                        name :user.name ,
                        password :user.password,
                        confirmpassword:user.confirmpassword,
                        status : user.status,
                        scope : user.scope,
                    };
                }

                $dialogScope.add = function() {
                    $scope.users.push($dialogScope.user);
                    $dialogScope.closeThisDialog();
                }
            }],
        });
    };

最佳答案 

angular.module("stack", [])
    .controller("move", function($scope) {
        $scope.user = {
            username: '',
            name: '',
            password: '',
            confirmpassword: ''
        };
        // this.apps = features;
        $scope.add = function(user) {
            $scope.hideField = true;
        }
    });
<!DOCTYPE html>
<html ng-app="stack">

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- // <script type="text/javascript" src="loadingoverlay.js"></script> -->
    <!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <!-- // <script type="text/javascript" src="controller.js"></script> -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body ng-controller="move">
    <form name="addUser">
        <div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
            <label class="control-label" for="username">Username</label>
            <input class="form-control" name="username" ng-model="user.username" required>
            <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
            <label class="control-label" for="name">Name</label>
            <input class="form-control" name="name" ng-model="user.name" required>
            <span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
            <label class="control-label" for="password">Password</label>
            <input type="password" class="form-control" name="password" ng-model="user.password" required ng-minlength="5">
            <span class="glyphicon form-control-feedback" ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';" ng-hide="hideField">
            <label class="control-label" for="confirmpassword">Re-enter Password</label>
            <input type="password" class="form-control" name="confirmpassword" ng-model="user.confirmpassword" required ng-minlength="5">
            <span class="glyphicon form-control-feedback" ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" ng-click="addUser()">Add New User</button>
        </div>
        <a ng-click="add(user)" class="btn"><i class="glyphicon glyphicon-edit"></i></a>
    </form>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

你需要这个吗？@Sue

关于javascript - 如果用户单击不同的按钮，则禁用表单元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36443483/

24 4 0
文章推荐： JavaScript - 如何在 "on"函数中添加对多个事件的支持？
文章推荐： c++ - 在运行时从 RPN 构造函数可调用对象
文章推荐： javascript - Jquery UI 调整文本大小取决于父 div 和屏幕大小
文章推荐： c++ - 类(函数)作为流接收器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com