[英]How can i hide/disable my radio button once one is selected
我想禁用或隱藏單選按鈕,一旦選中它-這樣用戶就無法進行價格比較,因為單選按鈕已鏈接到價格,並在選中單選按鈕后顯示了價格。 我正在使用淘汰表.js鏈接選定的單選按鈕並顯示價格。 並找到了一種方法來隱藏未選中的單選按鈕,但我無法將兩者合並在一起。
請參見下面的代碼:
<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() }"> </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>
有誰知道使它們協同工作的方法,還是有一種好的方法可以將單選按鈕隱藏在挖空中?
http://jsfiddle.net/afnguyen/MMqzv/3/
我還將jQuery附加在jsfiddle中-這顯示了我想要的內容,因為選定的單選按鈕類名稱更改了,因此不應隱藏:
http://jsfiddle.net/afnguyen/5mmt2/1/
謝謝
如果您想要一個純粹的Kncokout解決方案,則可以在enable綁定的幫助下達到相同的效果:
因此,當沒有選擇任何按鈕時,如果要轉換以下綁定,則要啟用該按鈕:
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 。
嘗試這個。 您可以將css屬性“ disabled”更改為=“ disabled”:
$(".class").attr(
'disabled', 'disabled'
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.