使用敲除取消选中带有单选按钮的复选框答案

【问题标题】：uncheck checkboxes with radio button using knockout使用敲除取消选中带有单选按钮的复选框
【发布时间】：2016-09-20 08:22:42
【问题描述】：

我正在尝试使用一个按钮创建一组复选框，该按钮用于在使用敲除选择时取消选中所有复选框。我已经看到这个功能带有一个复选框来选择/取消选择所有其他复选框，但我希望这个按钮是一个单选按钮，所以它不能被取消选中，但我希望它在任何复选框被选中时自动取消选中。

我对下面代码的问题是读取函数在写入函数之前被调用，所以当我点击单选按钮时，它会读取一个复选框被选中，然后清除复选框。所以我需要选择它两次才能更新。

我的代码如下：

JS：

function AppViewModel() {
    var self = this;

    self.fruits = ko.observableArray([
        {name : 'Apple', selected : ko.observable(false)},
        {name : 'Banana', selected : ko.observable(false)},
        {name : 'Coconut', selected : ko.observable(false)}
    ]);

    self.fruitGroup = ko.computed({
        read : function() {

            var someSelected = false;
            var fruitsArray = self.fruits();
            fruitsArray.forEach(function(fruit){
                if (fruit.selected()) {
                    someSelected = true;
                }         
            });
            return !someSelected;
        },
        write : function(newState) {
            var fruitsArray = self.fruits();
            fruitsArray.forEach(function (fruit){
                fruit.selected(false);
            });
            return true;
        }
    });

}

ko.applyBindings(new AppViewModel());

HTML：

<input type="radio" data-bind="checked: fruitGroup"/>
<label>None</label>

<hr/>

<div data-bind="foreach: fruits">
    <div>
        <input type="checkbox" data-bind="checked: selected, attr: {id: name}"/>
        <label data-bind="text: name, attr: {for: name}">Fruit</label>
    </div>    
</div>

http://jsfiddle.net/dp3jngmu/1/

【问题讨论】：

此行为可能与严重支持“取消选中”的单选按钮有关...如果您将type 属性更改为checkbox，它应该可以工作。
是的，它确实适用于复选框而不是单选按钮，但我不希望用户在选择该选项时能够取消选择该选项，这就是我更喜欢单选按钮的原因跨度>

标签： knockout.js

【解决方案1】：

单选按钮并不意味着在选中组中的一项后取消选中。他们可以不加检查地开始的唯一原因是不强制用户默认。 (https://ux.stackexchange.com/questions/13511/why-is-it-impossible-to-deselect-html-radio-inputs)

为了规避这个 (UX) 问题，我建议使用复选框。

<input type="checkbox" data-bind="checked: fruitGroup"/>

如果您不希望用户能够取消选中此框，从而不清楚应用的当前状态是什么，您可以使用 enable 或 disable 数据绑定：

<input type="checkbox" data-bind="checked: fruitGroup, disable: fruitGroup"/>

在此处查看这些小更新：http://jsfiddle.net/uprk0qm6/

如果您真的想违反 UX 模式并使用单选按钮来修复它，我想您必须创建一个自定义绑定以从元素中删除“checked”属性。或者找到一种在每次更新后重新插入元素的方法。例如，通过使用if data-binds 和click 绑定：http://jsfiddle.net/h2xca0wr/（这将重置您的基于键盘/选项卡的导航，并可能带来一些其他可访问性问题）

【讨论】：

谢谢，很有帮助