<div>
<table class="table">
<tbody>
<tr ng-repeat="student in ClassStudents | filter:stdsearch">
<td><input type="checkbox" ng-model="student.isselected"/></td>
</tr>
</tbody>
</table>
<div>
<input type="submit" ng-disabled="!student.isselected" value="Assign" />
</div>
</div>
I want enable button only when check box is checked. But it is not working for me. Please suggest.
Actually the problem is caused by referencing student outside of ng-repeat.
Assuming you have multiple students, and you only want the button to be enabled when at least 1 student is selected, then you'll need to loop over ClassStudents and check whether any of them is selected.
<button ng-disabled="countChecked() == 0">enable/disable</button>
$scope.countChecked = function(){
var count = 0;
angular.forEach($scope.ClassStudents, function(value){
if (value.isselected) count++;
});
return count;
}
Check the fiddle. It will enable the button when checkbox is checked and disable when checkbox is unchecked.
<div ng-controller="MyCtrl">
Hello, {{name}}!
<input type="checkbox" ng-model="student.isSelected"/>
<button ng-disabled="!student.isSelected" >enable/disable</button>
</div>
//js code
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.student = {isselected: false};
}
Use ng-disabled='student.isselected' in your button.
