点击复选框按钮，将显示文本框和提交按钮，点击提交按钮应禁用复选框按钮

Click on checkbox button, will display textfield and submit button, click on submit button should disable the checkbox button

本文关键字：按钮 提交 复选框 显示 文本      更新时间：2023-09-26
<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>
</div>

当我点击复选框按钮时，将弹出带有提交按钮的文本文本框。在文本域中输入评论后，当用户单击提交按钮时，该复选框应该被禁用。有人能给我一些建议吗?如何禁用复选框按钮，一旦我点击提交按钮?

$scope.saveAlert = function(alert) {
    $scope.alert.acknowledged = true;
    /*alert.acknowledgeInProgress = true;*/
    var alertUrl = $incidentsUrl+ "/" +alert.alertForIncident.incidentID+"/alerts/"+alert.alertID;
    $http.put(alertUrl, alert).then(function(result) {
        alert.acknowledgeInProgress = false;
    });     
}

您不需要在复选框上设置ng-click，只需将ng-model设置为ng-model="alert "。复选框会将其设置为true，并触发输入和按钮的显示。

<td>
      <input type="checkbox" ng-model="alert.acknowledgeInProgress" 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>
    </div>
相关文章：