将复选框视为 AngularJS 中的单选按钮答案

【问题标题】：Treat check-boxes like radio buttons in AngularJS将复选框视为 AngularJS 中的单选按钮
【发布时间】：2017-02-24 19:49:02
【问题描述】：

问题：我们有一组复选框。我希望一次只选中一个（例如单选按钮）。

我就是这样做的。

在查看

<div>
  <input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
    <div ng-if="first">
         <label>Hi</label>
    </div>
  <input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
    <div ng-if="second">
         <label>Adem</label>
    </div>
</div>

在控制器

function controller(){
   $scope.checkOne=function(val){
     if(val == '1'){
        $scope.first=true;
        $scope.second=false;
       }
     if(val == '2'){
        $scope.second=true;
        $scope.first=false; 
       }
   }
}

但它不起作用。它同时选中了两个复选框。

请给我一个解决方案。

谢谢。

【问题讨论】：

您的角度没有被调用。我认为你的函数 checkOne 没有被调用？添加警报并检查...我已经发布了您可以检查的答案
我也包含了角度和控制器，并且我的函数 checkOne 正在调用检查或取消选中复选框。但它的 $scope.first = false 不是取消选中复选框。
@PankajYadav 为什么你不为两个复选框选择一个 ng-model
我能问一下...你为什么不使用单选按钮本身而不是复选框..
因为我需要检查/取消检查功能，谢谢大家，我解决了这个问题，问题是原语值。

标签： angularjs checkbox

【解决方案1】：

试试这个：

<html ng-app>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">   </script>
<script src="script.js"></script>

 </head>
<body>
<div ng-controller="controller">
<input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
<div ng-if="first">
     <label>Hi</label>
</div>
 <input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
<div ng-if="second">
     <label>Adem</label>
    </div>
 </div>
 </body>
 </html>

script.js

  function controller($scope) {

  $scope.checkOne=function(val){
    if(val == '1'){
    $scope.first=true;
    $scope.second=false;
   }
   if(val == '2'){
    $scope.second=true;
    $scope.first=false; 
   }
  }
  }

【讨论】：

对不起 Reena ，我正在尝试您的建议。它没有更新复选框。
@PankajYadav 你能分享一下plunker吗
您是否添加了警报并检查您的函数是否被调用
我想你还没有提到 ngdialog。如果可以，请提供 plunker
对不起，我没有使用 plunker。

【解决方案2】：

http://plnkr.co/edit/WEn4CBXA3RvtZ33VuPyM?p=preview

您需要使用ng-checked。我还将所有选中的复选框设置为禁用，这样它们就不能被取消选中。之后，一个带有 switch 语句的简单函数可以在 ng-click 上切换所有这些。

控制器：

$scope.firstCheck = true;
$scope.checkToggle = function(checkbox) {
switch (checkbox) {
  case 'first': 
    $scope.firstCheck = true;
    $scope.secondCheck = false;
    $scope.thirdCheck = false;
    break;
    case 'second': 
    $scope.firstCheck = false;
    $scope.secondCheck = true;
    $scope.thirdCheck = false;
    break;
    case 'third': 
    $scope.firstCheck = false;
    $scope.secondCheck = false;
    $scope.thirdCheck = true;
    break;
}
}

HTML：

<div>
<input type="checkbox" ng-disabled="firstCheck" ng-click="checkToggle('first')" ng-model="first" ng-checked="firstCheck"  />
<div ng-if="first">
     <label>Hi</label>
</div>
<br/><input type="checkbox" ng-disabled="secondCheck" ng-click="checkToggle('second')" ng-model="second" ng-checked="secondCheck" />
<div ng-if="second">
     <label>Adem</label>
</div>
<br/><input type="checkbox" ng-disabled="thirdCheck" ng-click="checkToggle('third')" ng-model="third" ng-checked="thirdCheck" />
<div ng-if="third">
     <label>something else</label>
</div>

【讨论】：

谢谢 tpie，问题是原始类型。我将模型设置为对象的属性（status.firstCheck）。
如果您有不同的解决方案，您应该将其发布为您问题的答案。
[link] (plnkr.co/edit/WEn4CBXA3RvtZ33VuPyM?p=preview) 在某些情况下它不起作用，请查看下图！Valid XHTML

【解决方案3】：

Checkbox Treat as RadioButton : 这里我们有四个复选框，都应该作为 RadioButton 工作。带有 ng-change 的复选框用于更改 ng-model 的值。

http://plnkr.co/edit/yTJUZcFoLsSEBjruRuEY?p=preview

App.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.first = false;
  $scope.second = false;
  $scope.third = false;
  $scope.fourth = false;
});

HTML

 <div>{{first}}|{{second}}|{{third}}|{{fourth}}
  <br/>
  <input type="checkbox" ng-model="first" ng-change="second=false;third = false;fourth = false;"  />
  <input type="checkbox" ng-model="second" ng-change="first = false;third = false;fourth = false;" />
  <input type="checkbox" ng-model="third" ng-change="first =false;second = false;fourth = false;" />
  <input type="checkbox" ng-model="fourth" ng-change="first = false;second = false;third = false;" />
</div>

【讨论】：