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

您必须使用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 2

我建议使用jQuery：

＆＃13;

$("#submit").click(function(){
  $("#alertAcknowledged").attr("disabled", true);
})

＆＃13;

<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>

＆＃13;

Answer 3

将disableCheckbox添加为参数并将其设置在click函数内。

<强> 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 =＆＃34; alert.acknowledged＆＃34;但是ng-click =＆＃34; alert.acknowledged＆＃34;同样。这意味着当您单击单选按钮时，alert.acknowledged将设置为true，因此它将被禁用。

你可能想要ng-disabled中的一个不同的值，可能是ng-disabled =＆＃34; disableRadioBtn＆＃34;然后在你的提交控制器中你可以设置$ scope.disableRadioBtn = false;

单击提交按钮，应禁用Angular JS复选框按钮

4 个答案: