取消選中與單選按鈕使用淘汰賽的複選框

我想創建一組複選框與一個按鈕，用於取消選中時使用淘汰賽的所有複選框。我已經看到這個功能與複選框選擇/取消選擇所有其他複選框，但我希望這個按鈕是一個單選按鈕，所以它不能被取消選中，但我希望它自動取消選中任何複選框時勾選。取消選中與單選按鈕使用淘汰賽的複選框

我下面的代碼的問題是，在寫函數之前調用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/

來源

2016-05-23 user2424495

這種行爲可能有一個單選按鈕，嚴重支持這樣做「取消選中」...如果將'type'屬性更改爲'checkbox'，它應該可以工作。 – user3297291

是的，它可以使用複選框而不是單選按鈕，但我不希望用戶能夠在被選中時取消選擇這個選項，這就是爲什麼我更喜歡單選按鈕 – user2424495

單選按鈕並不意味着要取消選中的一個後組的項目被檢查。他們可以不加選擇地開始的唯一原因是不強制默認用戶。（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/

如果你真的想違背用戶體驗模式，並用單選按鈕修復它，我想你必須創建一個自定義綁定來刪除'checked'屬性元素。或者找出一種方法在每次更新後重新插入元素。例如，通過使用if數據綁定和click綁定：http://jsfiddle.net/h2xca0wr/（這將重置您的鍵盤/基於標籤導航，可能帶來一些其他的輔助功能問題）

來源

2016-05-23 13:47:24 user3297291

真的很好的答案！ –

謝謝，非常有幫助 – user2424495

取消選中與單選按鈕使用淘汰賽的複選框

回答

相關問題