Question

我有两个复选框，我希望这些复选框的值相互依赖。当我检查第一个复选框时，第二个是取消选中，当我取消选中第一个时，第二个被检查，反之亦然。我可以用jQuery做到：example。

$('input').on('change', 
     function() {         
         var anotherId = $(this).attr('id') == 'first' ? 'second' : 'first';        
         if($(this).is(':checked'))
             $('[id="' + anotherId + '"]').removeAttr('checked');
         else 
             $('[id="' + anotherId + '"]').attr('checked', 'true');
     });

但这不是我认为最好的方式。我知道我可以用knockout.js来做，但不知道怎么做做到这一点。你能帮我解决这个问题吗？

Answer 1

您是否考虑使用单选按钮？ ; - ）

你没有给出太多实际背景;有很多方法可以解决这个问题，最好的方法取决于具体情况。无论如何，这是一种方法。

为值创建“私有”可观察对象，并在write位内部具有一些额外逻辑的“公共”计算可观察量（类似于C＃中具有复杂setter的属性）：

var ViewModel = function() {
    var self = this;

    var _first = ko.observable(true);
    var _second = ko.observable(false);

    self.first = ko.computed({
        read: _first,
        write: function(val) {
            _first(val);
            _second(!val);
        }});

    self.second = ko.computed({
        read: _second,
        write: function(val) {
            _second(val);
            _first(!val);
        }});
};

ko.applyBindings(new ViewModel());

查看this fiddle中的工作演示。再次注意，复选框现在只是表现得像单选按钮......

淘汰赛及其绑定

1 个答案: