puneeth Srikanta puneeth Srikanta - 23 days ago 10
AngularJS Question

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

<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

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>