रेडियो बटन नॉकआउटज

Question

मेरे पास 2 ए मान हैं जो मुझे सर्वर ए और बी से मिलता है। मैं एक समय में केवल एक ही सत्य रख सकता हूं।

फिर मुझे जो चाहिए वह रेडियो में से एक है ताकि एक बार वास्तविक मूल्य हो।

var viewModel = { 
 
    radioSelectedOptionValue: ko.observable("false"), 
 
    A: ko.observable("false"), 
 
    B: ko.observable("false") 
 
}; 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> 
 
<div class='liveExample'>  
 
     <h3>Radio View model</h3> 
 
     <table> 
 
     <tr> 
 
      <td class="label">Radio buttons:</td> 
 
      <td> 
 
       <label><input name="Test" type="radio" value="True" data-bind="checked: A" />Alpha</label> 
 
       <label><input name="Test" type="radio" value="True" data-bind="checked: B" />Beta</label> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    A-<span data-bind="text: A"></span> 
 
    B-<span data-bind="text: B"></span> 
 
</div>

Answer 1

checked बाध्यकारी रेडियो बटन और चेक बॉक्स के लिए अलग तरह से काम करता है:

documentation से:

रेडियो बटन के लिए, KO तत्व सेट हो जाएगा जाँच की जानी यदि और केवल यदि पैरा मीटर मान रेडियो बटन नोड के value विशेषता के बराबर है। तो, आपका पैरामीटर मान स्ट्रिंग होना चाहिए।

तो आप अपने आदानों की value विशेषता को "ए" और "बी" सेट और फिर radioSelectedOptionValue जो 'ए' या 'बी', जिस पर विकल्पों के आधार में शामिल होंगे चयन किया जाता है करने के लिए बाध्य करने की जरूरत है:

<label> 
    <input name="Test" type="radio" value="A" 
      data-bind="checked: radioSelectedOptionValue" /> 
    Alpha 
</label> 
<label> 
    <input name="Test" type="radio" value="B" 
      data-bind="checked: radioSelectedOptionValue" /> 
    Beta 
</label> 

आप अपने बूलियन गुण रखना चाहते हैं: A और B, तो आप उन्हें ko.computed बनाने की जरूरत है (केवल पढ़ने के लिए, लिखने योग्य) का उपयोग करेगा जो/radioSelectedOptionValue का मूल्य परिवर्तित:

this.radioSelectedOptionValue = ko.observable(); 
this.A = ko.computed({ 
     read: function() { 
      return this.radioSelectedOptionValue() == "A"; 
     }, 
     write: function(value) { 
      if (value) 
       this.radioSelectedOptionValue("A"); 
     } 
    }, this); 

डेमो JSFiddle.

Answer 2

नॉकआउट 3.x चेकव्यू बाध्यकारी विकल्प जोड़ा गया। यह आपको तारों के अलावा अन्य मान निर्दिष्ट करने की अनुमति देता है।

<input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: true" /> 
    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: false" /> 

http://jsfiddle.net/t73d435v/