淘汰賽不會改變單選按鈕視圖

我有一個單選按鈕標籤和文本框的工作面板。一切都很好，除非我明確單擊單選按鈕，單選按鈕不會更改單選按鈕視圖。淘汰賽不會改變單選按鈕視圖

這裏plnkr鏈接到它：

https://embed.plnkr.co/auD0sMEL88EsuaQqvt7E/

2016-08-04 Tatjana Kopalova

正如@ user3297291提的是，檢查和confict單擊綁定搞定。

添加這種結合：

ko.bindingHandlers.stopBubble = { 
init: function(element) { 
ko.utils.registerEventHandler(element, "click", function(event) { 
    event.cancelBubble = true; 
    if (event.stopPropagation) { 
     event.stopPropagation(); 
    } 
    }); 
    } 
};

你必須在每一個無線電元件這種結合這樣的補充：

<input data-bind="checked: discountValue, stopBubble: true" id="discountArbitrary" name="discount" type="radio" value="arbitrary" />

我創建了一個的jsfiddle如你預期的作品。 https://jsfiddle.net/astrapi69/s3r60uLu/

來源

2016-08-05 16:24:26

是的jsfiddle示例按預期工作。謝謝。 –

我猜點擊綁定與檢查結合衝突。

您可以使用計算來計算啓用/聚焦的標誌。

您可以檢查修改後的代碼（我省略了重點標記有利於簡化）：

// Code goes here 
 
var DiscountViewModel = function() { 
 

 
    var self = this; 
 

 
    self.arbitrary = ko.observable(); 
 
    self.percent = ko.observable(); 
 
    self.permanent = ko.observable(); 
 

 
    self.discountValue = ko.observable('arbitrary'); 
 

 
    self.enableArbitrary = ko.computed(() => self.discountValue() === 'arbitrary'); 
 
    self.enablePercent = ko.computed(() => self.discountValue() === 'percent'); 
 
    self.enablePermanent = ko.computed(() => self.discountValue() === 'permanent'); 
 

 
    self.onArbitrary = onArbitrary; 
 
    self.onPercent = onPercent; 
 
    self.onPermanent = onPermanent; 
 

 
    function onArbitrary() { 
 
     self.discountValue('arbitrary'); 
 
    } 
 

 
    function onPercent() { 
 
     self.discountValue('percent'); 
 
    } 
 

 
    function onPermanent() { 
 
     self.discountValue('permanent'); 
 
    } 
 

 
}; 
 

 
var vm = new DiscountViewModel(); 
 
ko.applyBindings(vm);

/* Styles go here */ 
 
.header-line { 
 
    margin-bottom:20px; 
 
    margin-top:20px; 
 
    margin-left:20px; 
 
}

<script data-require="[email protected]" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.js"></script> 
 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
 
    <script data-require="[email protected]" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js" type="text/javascript" defer="defer"></script> 
 

 
    <h1 class="header-line"> 
 
     KO binding hasFocus over boolean values 
 
    </h1> 
 
    
 
    
 
    <div class="form-group row"> 
 
     <div class="col-xs-1"> 
 
     </div> 
 
     <div class="col-xs-1"> 
 
     <input name="discount" type="radio" value="arbitrary" data-bind="checked: discountValue" /> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <label for="arbitrary" data-bind="click: onArbitrary">Discount arbitrary</label> 
 
     </div> 
 
     <div class="col-xs-5"> 
 
     <input type="text" class="form-control" id="arbitrary" placeholder="Enter arbitrary discount" data-bind="enable: enableArbitrary, value: arbitrary, hasFocus: enableArbitrary"> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="form-group row"> 
 
     <div class="col-xs-1"> 
 
     </div> 
 
     <div class="col-xs-1"> 
 
     <input name="discount" type="radio" value="percent" data-bind="checked: discountValue" /> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <label for="percent" data-bind="click: onPercent">Discount percent</label> 
 
     </div> 
 
     <div class="col-xs-5"> 
 
     <input type="text" class="form-control" id="percent" placeholder="Enter percent of discount" data-bind="enable: enablePercent, value: percent, hasFocus: enablePercent"> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="form-group row"> 
 
     <div class="col-xs-1"> 
 
     </div> 
 
     <div class="col-xs-1"> 
 
     <input name="discount" type="radio" value="permanent" data-bind="checked: discountValue" /> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <label for="permanent" data-bind="click: onPermanent">Discount permanent</label> 
 
     </div> 
 
     <div class="col-xs-5"> 
 
     <input type="text" class="form-control" id="permanent" placeholder="Enter permanent discount" data-bind="enable: enablePermanent, value: permanent, hasFocus: enablePermanent"> 
 
     </div> 
 
    
 
    </div>

來源

2016-08-04 09:43:13 TSV

的問題是，通過點擊單選按鈕，發生兩件事情：

的checked結合就執行
電子冒泡到父元素，並且綁定也起作用。

您必須確保單擊input元素可以阻止click綁定的觸發。

有一個偉大的答案被R.P.尼邁耶這裏：https://stackoverflow.com/a/14321399/3297291

來源

2016-08-04 09:43:57 user3297291

淘汰賽不會改變單選按鈕視圖

回答

相關問題