I want to disable or hide the radio button once one has been selected - this is so that the user can t price compare as the radio button is linked to the price and shows the price once the radio button is checked. I am using knockout.js to link the selected radio button and display the price. And have found a way on jquery to hide the not selected radio buttons but I am having trouble merging the two together.
Please see the code below:
<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>
Does anyone know a way of making them work toether or is there a good way to hide the radio buttons in knockout?
http://jsfiddle.net/afnguyen/MMqzv/3/
I have also attached the jquery in a jsfiddle - this shows what i want as the selected radio button class name changes and so should not hide:
http://jsfiddle.net/afnguyen/5mmt2/1/
Thanks
If you want to have a pure Kncokout solution you can achieve the same effect with the help of the enable binding :
So you want to enable the button when none of them selected which translates the following binding:
data-bind="enable: !$parent.selectedGroupOption()"
So the full sample with your code:
<input type="radio" id="makeOpacityHide"
class="radioOptions" name="retailerGroup"
data-bind="checked: $parent.selectedGroupOption,
value: retailerproductId,
enable: !$parent.selectedGroupOption()" />
Demo JSFiddle .
Try this. You can change the css attrib "disabled" to = "disabled":
$(".class").attr(
'disabled', 'disabled'
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.