Click on submit button, should disable the checkbox button Angular JS - html

Question

<td>
<input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" ng-click="onacknowledgedClick(alert)">
</td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
When I click on checkbox button, the text textfield with submit button will be popped up. After entering the comments on textfield, when the user clicks on submit button, the checkbox should get disabled. Can anyone give me some inputs on this?
How to disable the checkbox button, once when I click on Submit button?

Answer 1

I'd suggest jQuery:
$("#submit").click(function(){
$("#alertAcknowledged").attr("disabled", true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" id="alertAcknowledged" ng-click="onacknowledgedClick(alert)"></td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)" id="submit"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>

Answer 2

You have to use JavaScript to do this. Make an event listener for the submit button that disables the checkbox and the cancel button that does display: none; to the text input. For info about event listeners visit this site: Event Listeners
This is what you should do:
document.getElementById("submit").addEventListener("click", function() {document.getElementById("alertAcknowledged").disabled = true;})
document.getElementById("cancel").addEventListener("click", function() {document.getElementById("text").style.display = "none";})
<td><input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" id="alertAcknowledged" ng-click="onacknowledgedClick(alert)"></td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" id="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)" id="submit"> Submit </button>
<button type="button" id="cancel" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>

Answer 3

I would avoid using jquery as much as possible in angular. Here's a good read http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/
So, it looks like your ng-disabled="alert.acknowledged" but ng-click="alert.acknowledged" as well. This means when you click the radio button, alert.acknowledged is set to true, so it gets disabled.
You probably want a different value in ng-disabled, maybe ng-disabled="disableRadioBtn", then in your submit controller you can set $scope.disableRadioBtn = false;

Answer 4

add disableCheckbox as a paramet and set it inside the click function.
HTML
<td>
<input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.disableCheckbox" ng-click="onacknowledgedClick(alert)">
</td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
CONTROLLER
$scope.onacknowledgedClick = function(alert){
alert.acknowledgeInProgress = true;
}
$scope.saveAlert = function(alert) {
/*$scope.alert.acknowledged = true;*/
alert.disableCheckbox = true;
alert.acknowledgeInProgress = true;
var alertUrl = $incidentsUrl+"/"+alert.alertForIncident.incidentID+"/alerts/"+alert.alertID;
$http.put(alertUrl, alert).then(function(result) {
alert.acknowledgeInProgress = false;
});
}