具有單選按鈕類型行為的復選框

Question

我正在嘗試在復選框上復制單選按鈕的行為。 我想做的是在任何給定時間至少應選中一個復選框。 所以場景是1）選中所有復選框2）第一個選中了3）第二個選中了

但永遠不要都沒有檢查。 我制造了一個小提琴，並試圖做到這一點。 如果有人可以提供見解，那就太好了。

<script type="text/javascript" src="http://code.angularjs.org/angular-1.0.0rc8.min.js"></script>

http://jsfiddle.net/N3w8Z/76/

謝謝

Answer 1

該插件展示了在angularJS中解決此問題的方法。

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

解決方案的核心涉及此函數，該函數迭代集合以確保至少一個值設置為true。

this.testCollection = function(thingsList){
  return thingsList.some(function(thing){
    return thing.value === true;
  });
}

Answer 2

您可以使用jQuery或js邏輯來做，即當您選中一個復選框時，將其他復選框取消選中

DEMO

$(".sel").each(function()
{
    $(this).change(function()
    {
        $(".sel").prop('checked',false);
        $(this).prop('checked',true);
    });
});


<div ng-app="app">
<div class="form-horizontal form-group">
    <label class="form-horizontal col-xs-3">Media:</label>
    <input class="form-horizontal col-xs-1 sel" name="grp" type="checkbox" ng-model="disablelist" ng-init="disablelist=true">
    <label class="form-horizontal col-xs-2">Play Music</label>
    <input class="form-horizontal col-xs-1 sel" name="grp" type="checkbox" ng-model="disableprofile">
    <label class="form-horizontal col-xs-3">Play Movie</label><br><br>
</div>

</div>

Answer 3

由於它是Angular應用，因此您可以嘗試

演示

function MyController($scope){ $scope.changeFn = changeFn; function changeFn(){ if(!$scope.disablelist && !$scope.disableprofile){ $scope.disablelist = true; } } }

Answer 4

我使用了一些普通的javascript來實現您想要的行為。 將此代碼包裝在函數中，並將其連接到onclick事件以進行輸入。 添加到您的小提琴： http ： //jsfiddle.net/6e2jzxbx/

var inputs = document.getElementsByTagName('input');
var oneActive = false;

for(var i = 0; i < inputs.length; i++){
    if(inputs[i].checked == true){
        oneActive = true;
    }

    if(!oneActive){
        inputs[1].checked = true;
    }
}