javascript - How to disable button if no checkbox is selected - Stack Overflow

admin管理员组

文章数量:1379483

I got the following angular template:

<tr ng-repeat="user in users">
    <td><input type="checkbox"></td>
    <td>{{user.username}}</td>
    <td>{{user.apiKey}}</td>
    <td>{{user.apiSecret}}</td>
</tr>
...
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>

How can I disable the button if no checkbox is checked but enable it whenever one or more checkboxes in the table are checked?

And how can I determine which table entry was checked and access the user-data?

I got the following angular template:

<tr ng-repeat="user in users">
    <td><input type="checkbox"></td>
    <td>{{user.username}}</td>
    <td>{{user.apiKey}}</td>
    <td>{{user.apiSecret}}</td>
</tr>
...
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>

How can I disable the button if no checkbox is checked but enable it whenever one or more checkboxes in the table are checked?

And how can I determine which table entry was checked and access the user-data?

• javascript
• jquery
• angularjs
• model-view-controller
• input

Share Improve this question Follow edited Nov 10, 2015 at 1:01 Shadow 4,01655 gold badges2323 silver badges4242 bronze badges asked Nov 7, 2015 at 20:34 Michael PittinoMichael Pittino 2,17811 gold badge1111 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The Angular way is to use ng-disabled. As an example you can use this:

ng-disabled="!checked"

The ! means to do the opposite, so !true == false = true

Full Example:

<td>
   <input type="checkbox" ng-model="checked"
</td> 

<button class="btn btn-danger" ng-disabled="!checked"><i class="fa fa-trash-o"></i>Submit</button>

Read more on ng-disabled here:

https://docs.angularjs/api/ng/directive/ngDisabled

What is HTML attribute checked?

The checked attribute is a boolean attribute.

When present, it specifies that an element should be pre-selected (checked) when the page loads.

The checked attribute can be used with and <input type="radio">.

CODEPEN DEMO

You could add the checked state to the user and check at every checkbox change if there is still one user selected.

Checking can be done with angular.forEach, with a for loop or with underscore.js (if you'd like to use it). During that loop you can also create the array of checked users.

Please have a look at the demo below or in thid fiddle.

angular.module('demoApp', [])
    .controller('MainController', MainController);

function MainController($scope) {
    $scope.users = [{
        username: 'John',
        apiKey: '1234',
        apiSecret: '2345'
    }, {
        username: 'Jane',
        apiKey: '234',
        apiSecret: '24'
    }];
    $scope.checkedUsers = [];
    
    $scope.checkButtonState = function() {
    	/* with underscore.js
        $scope.checkedUsers = _.where($scope.users, {check: true});
        $scope.enableButton = _.chain($scope.checkedUsers)
            .pluck('check').some().value();
        */
        $scope.checkedUsers = [];
        angular.forEach($scope.users, function(user) {
        	if ( user.check ) {
                $scope.checkedUsers.push(user);
            }
        });
        
        $scope.enableButton = $scope.checkedUsers.length > 0;
    };
}

<link href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
    <table>
        <tr ng-repeat="user in users">
            <td>
                <input 
                       ng-model="user.check"
                       ng-change="checkButtonState()"
                       type="checkbox">
            </td>
            <td>{{user.username}}</td>
            <td>{{user.apiKey}}</td>
            <td>{{user.apiSecret}}</td>
        </tr>
    </table>
        
    <button type="button" class="btn btn-danger"  ng-disabled="!enableButton"><i class="fa fa-trash-o"></i>
    </button>
        {{checkedUsers}}
</div>

In a non-angularJS example (vs. @GothBurz's answer, which is more elegant but less intuitive):

jQuery:

$("input:checkbox").change(function() {     // every time a checkbox changes
    $("button").attr("disabled", "true");   // start button disabled
    $("input:checkbox:checked").each(function() {
        $("button").removeAttr("disabled"); // if any checkbox checked, make button enabled
    });
});

See a working example on JSFiddle.

Or, for a longer, non-jQuery example, see this fiddle.

本文标签： javascriptHow to disable button if no checkbox is selectedStack Overflow