Deselecting radio buttons while keeping the View Model in synch
I have a radio group that allows the user (using jQuery events) to deselect previous selections. I am trying to add KnockoutJS to track changes, but the viewmodal gets out of sync with the UI. Can anyone suggest how I might get the two to be in sync?
My view code:
<div id='test'>
<input data-bind="checked: asd" name='asd' type='radio' value="a"/>
<input data-bind="checked: asd" name='asd' type='radio' value="b"/>
<input data-bind="checked: asd" name='asd' type='radio' value="c"/>
</div>
<div>
<p>Linked Value: <span data-bind="text: asd"></p>
</div>
Corresponding JS:
$('#test input[type="radio"]').click(function (event) {
var checked = $(this).hasClass('checked');
if (checked) {
$(this).removeAttr('checked');
$(this).removeClass('checked');
开发者_开发技巧 }
else {
$(this).addClass('checked');
}
});
var viewModel = {
asd: ko.observable("a")
};
ko.applyBindings(viewModel);
An example can be viewed here online in this fiddle.
I think that a simple way would be to do:
$('#test input[type="radio"]').click(function (event) {
if ($(this).val() === viewModel.asd()) {
viewModel.asd(null);
}
});
Updated Fiddle
You don't need to worry about the checked attribute, that's done for you. Change your event to this:
$('#test input[type="radio"]').click(function (event) {
var checked = $(this).hasClass('checked');
if (checked) {
$(this).removeClass('checked');
}
else {
$(this).addClass('checked');
}
});
Fork of your fiddle here
精彩评论