ノックアウトを使用してラジオボタンでチェックボックスをオフにした

Question

ノックアウトを使用して選択するとすべてのチェックボックスのチェックを外すために使用する1つのボタンでチェックボックスのグループを作成しようとしています。私はこの機能を他のすべてのチェックボックスを選択/選択解除するチェックボックスで見ましたが、このボタンをラジオボタンにしてチェックを外すことはできませんが、チェックボックスをオンにすると自動的にチェックを外します。

私の問題は、以下のコードでは、write関数の前にread関数が呼び出されるため、ラジオボタンをクリックすると、チェックボックスがオンになっていることを確認してチェックボックスをクリアします。だから私はそれを更新するためにそれを2度選択する必要があります。

次のように私のコードは次のとおりです。

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, disable: fruitGroup"/> 

：

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

は、あなたはenableまたはdisableデータバインドを使用することができ、アプリケーションの現在の状態が何であるか、それは不明で残し、ユーザーはこのチェックボックスをオフにすることができるようにしたくない場合

http://jsfiddle.net/uprk0qm6/

本当にUXパターンに挑戦してラジオボタンで修正したいのであれば、カスタムバインディングを作成して 'checked'プロパティを削除する必要があります要素。あるいは、更新のたびに要素を再挿入する方法を見つけてください。 http://jsfiddle.net/h2xca0wr/（このがキーボード/タブベースのナビゲーションをリセットし、おそらく他のいくつかのアクセシビリティの問題が表示されます）