[英]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.