一旦選擇了一個，我如何隱藏/禁用我的單選按鈕

我想在選擇一個選項後禁用或隱藏單選按鈕 - 這樣用戶無法單價比較，因爲單選按鈕與價格鏈接並在單選按鈕被檢查後顯示價格。我正在使用knockout.js鏈接選定的單選按鈕並顯示價格。並找到了一種方法在jquery隱藏未選定的單選按鈕，但我無法將兩者合併在一起。一旦選擇了一個，我如何隱藏/禁用我的單選按鈕

請參閱下面的代碼：

<div class="stepTwo"> 
    <div class="middleTitle"> 
     <p> 
     </p> 
    </div> 
    <div data-bind="with: bin2ViewModel"> 
     <div class="divRadiobtns" data-bind="foreach: availableGroups"> 
      <input type="radio" id="makeOpacityHide" class="radioOptions" name="retailerGroup" 
       data-bind="checked: $parent.selectedGroupOption, value: retailerproductId" /><span 
        class="radioOptionsA" data-bind="css: { 'radioOptionsA-checked': $parent.selectedGroupOption()==retailerproductId() }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
     </div> 
     <div data-bind="with: selectedRetailerGroup"> 
      <span class="actualPrice" data-bind="text: price" /> 
     </div> 
     <div data-bind="with: selectedRetailerGroup"> 
      <input type="hidden" name="retailerProductId" id="retailerProductId" class="retailerProductId" 
       data-bind="value: retailerproductId" /> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
//<![CDATA[ 
    //jquery 
    $(document).ready(function() { 
     $("input[name$='retailerGroup']").click(function() { 
      var test = $(this).val(); 

      $("input.radioOptionsA").hide(); 

     }); 
    }); 


    //knockout 
    var Bin2ViewModel = function() { 
     var self = this; 
     this.selectedRetailerGroup = ko.observable(); 
     this.selectedGroupOption = ko.observable(); 
     this.selectedGroupOption.subscribe(function (newVal) { 
      var items = $.grep(self.availableGroups(), function (item) { return item.retailerproductId() == newVal; }); 
      self.selectedRetailerGroup(items[0]); 
     }); 
     this.selectedGroup = ko.observable(); 
     this.availableGroups = ko.observableArray(
      [new RetailerViewModel("21290", "£1.80"), 
       new RetailerViewModel("302852", "£2.55"), 
       new RetailerViewModel("422974", "£2.55") 
      ]); 
    }; 


    var RetailerViewModel = function (retailerproductId, price) { 
     this.retailerproductId = ko.observable(retailerproductId); 
     this.price = ko.observable(price); 
    }; 
    ko.applyBindings({ bin2ViewModel: ko.observable(new Bin2ViewModel()) }); 
//]]> 
</script>

有誰知道使他們的工作toether還是有隱藏在淘汰賽單選按鈕的好方法的一種方式？

http://jsfiddle.net/afnguyen/MMqzv/3/

我還附上一個的jsfiddle jQuery的 - 這說明了什麼，我想爲選定的單選按鈕類名稱的變化，因此不應該隱瞞：

http://jsfiddle.net/afnguyen/5mmt2/1/

感謝

來源

2013-02-04 anna

你介意提供一個jsFiddle嗎？ – Chazt3n

$（this）.hide（）; – mplungjan

@ Chazt3n我已經添加了一個小提琴 – anna

試試這個。您可以更改CSS ATTRIB「已禁用」，以=「已禁用」：

$(".class").attr(
     'disabled', 'disabled' 
    );

來源

2013-02-04 15:44:20 CrzySheeit

嗨，謝謝你的工作，我已經更新了你的更改我的提琴手http://jsfiddle.net/afnguyen/MMqzv/10/非常感謝！ – anna

如果你想有一個純Kncokout解決方案可以實現與enable binding的幫助下同樣的效果：

所以你要啓用該按鈕時，選擇他們沒有它轉換以下綁定：

data-bind="enable: !$parent.selectedGroupOption()"

所以你的代碼的全樣本：

<input type="radio" id="makeOpacityHide" 
     class="radioOptions" name="retailerGroup" 
     data-bind="checked: $parent.selectedGroupOption, 
        value: retailerproductId, 
        enable: !$parent.selectedGroupOption()" />

演示JSFiddle。

來源

2013-02-04 16:19:43 nemesv

非常好 - 它可能更好地堅持淘汰賽，而不是交換！謝謝 – anna

一旦選擇了一個，我如何隱藏/禁用我的單選按鈕

回答

相關問題