简体   繁体   中英

Radio button is not changing the value once I am clicking first time

I have 3 radio buttons and it's by default is selected as YES and I have one submit button. If I will select any one as no button then submit button will disable. Once every three button is yes then save button enable otherwise disable.

I have below code written in my project.

 app .controller( "MainCtrl", function($scope, $http) { $scope.formModel = { internationalClient: 0, isConfidential: 0, isModificationLossRecog: 0, idenComplianceForFinDifficulty: 1, idenComplianceForConcession: 1, idenComplianceForModificationOrRefin: 1 }; $(".radioBtn") .click( function() { $("#save").attr("disabled", true); $scope.forbraranceJson1 = angular.toJson( $scope.formModel, false); console.log($scope.forbraranceJson1); var x1 = JSON.parse($scope.forbraranceJson1); console.log("11 " + x1.idenComplianceForModificationOrRefin); console.log("22 " + x1.idenComplianceForFinDifficulty); console.log("33 " + x1.idenComplianceForFinDifficulty); if (x1.idenComplianceForModificationOrRefin == 1 && x1.idenComplianceForConcession == 1 && x1.idenComplianceForFinDifficulty == 1) { $("#save").attr("disabled", false); $scope.measureCheckbomsg = ""; } else { //$("#save").attr("disabled", true); $scope.measureCheckbomsg = "Please select all Forbearance requirements as YES"; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> <html ng-app="App"> <body ng-controller="MainCtrl"> <form name="theForm" novalidate="novalidate"> <input type="radio" ng-model="formModel.isModificationLossRecog" ng-value="1">Yes <input type="radio" ng-model="formModel.isModificationLossRecog" ng-value="0" ng-checked="true">No <input type="radio" class="radioBtn" ng-model="formModel.idenComplianceForFinDifficulty" ng-value="1" ng-checked="true">Yes <input type="radio" ng-model="formModel.idenComplianceForFinDifficulty" class="radioBtn" ng-value="0">No <input type="radio" ng-model="formModel.idenComplianceForConcession" ng-value="1" class="radioBtn" ng-checked="true">Yes <input type="radio" class="radioBtn" ng-model="formModel.idenComplianceForConcession" ng-value="0">No <button class="btn btn-success btn-sm" id="save" ng-click="saveRegistration(theForm.$valid)">Save</button> </body> </html> 

When I click first time any radio button the value does not change 1 to 0 . If I will click a 2nd time then its value is changing in JSON.

In your sample, you should not use radio buttons but checkbox. Radio button is more use when you want a choice between several value. In you case it's more like a boolean so checkbox seems a better choice.

Then in angular use "ng event" like ng-click or ng-change

<input type="checkbox" ng-model="formModel.idenComplianceForConcession" ng-click="clickedCallback"/>

like that in your controller

$scope.clickedCallback = function () {
 console.log(formModel.idenComplianceForConcession);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM