Question

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

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

我的代码如下：

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/

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

如果您真的想要违反用户体验模式并使用单选按钮进行修复，我猜您必须创建一个自定义绑定来删除“已检查”模式。元素的属性。或者找到一种在每次更新后重新插入元素的方法。例如，使用if数据绑定和click绑定：http://jsfiddle.net/h2xca0wr/（此将重置基于键盘/标签的导航，并可能会显示其他一些辅助功能问题）

取消选中使用敲除的单选按钮复选框

1 个答案: