點擊提交按鈕，應該禁用複選框按鈕Angular JS

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> 

當我點擊複選框按鈕時，彈出提交按鈕的文本文本框。在文本框中輸入註釋後，當用戶點擊提交按鈕時，複選框應該被禁用。任何人都可以給我一些這方面的投入？ 如何禁用複選框按鈕，一次點擊提交按鈕？

Answer 1

我建議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

必須使用JavaScript來完成此操作。爲提交按鈕創建一個事件偵聽器，禁用複選框以及對文本輸入執行display: none;的取消按鈕。有關事件偵聽器的信息訪問這個網站：Event Listeners 這是你應該做的：

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

添加disableCheckbox作爲參數並將其設置在t中他點擊功能。

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; 
    }); 
} 

Answer 4

我會避免使用jquery如角儘可能。這是一個很好的閱讀http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/

所以，它看起來像你ng-disabled =「alert.acknowledged」，但ng-click =「alert.acknowledged」以及。這意味着當您單擊單選按鈕時，alert.acknowledged設置爲true，因此它被禁用。

你可能想在ng-disabled中使用不同的值，也許ng-disabled =「disableRadioBtn」，那麼在你的提交控制器中你可以設置$ scope.disableRadioBtn = false;