淘汰单选按钮点击绑定不起作用

时间:2015-09-03 06:30:58

标签: knockout.js

我的HTML代码是:

<div class="radio i-checks" data-bind="click: fixPriceChecked"><label> <input type="radio" value="fixedPrice" name="bidingAllowed"> <i></i> Fixed Price </label></div>
<div class="radio i-checks" data-bind="click:allowBidingChecked"><label> <input type="radio" value="allowBiding" name="bidingAllowed"> <i></i> Allow Biding</label></div>

我的js代码是:

self.fixPriceChecked = function () {
                alert("clicked");
                return true;
            }

点击数据绑定无效。 fixPriceChecked函数不会监听点击。我做错了什么?

更新

我将我的HTML更新为:

<div data-bind="click:fixPriceChecked">click here</div>
<div class="radio i-checks" data-bind="click:fixPriceChecked"><label> <input type="radio" value="fixedPrice" name="bidingAllowed"> <i></i> Fixed Price </label></div>
<div class="radio i-checks" data-bind="click:allowBidingChecked"><label> <input type="radio" value="allowBiding" name="bidingAllowed"> <i></i> Allow Biding</label></div>

现在,当我点击click here时它工作正常。这意味着单选按钮存在一些问题。点击不仅仅使用单选按钮。

2 个答案:

答案 0 :(得分:3)

Html元素输入是一个自动结束标记<input />,您可以更正它。

默认情况下,您的代码可以正常检查here

我不认为点击div是个好主意,因为我们已经有单选按钮的checked选项

更新:您需要使用自定义绑定处理程序来集成iCheck插件。

查看:

<div>
    <label>
        <input class="radio i-checks" type="radio" data-bind="iChecked: fixedPrice " name="1" value="fixedPrice" />Fixed Price</label>
</div>
<div>
    <label>
        <input class="radio i-checks" type="radio" data-bind="iChecked: allowBiding " name="1" value="allowBiding" />Allow Biding</label>
</div>

<强>视图模型:

ko.bindingHandlers.iChecked = {
    init: function (element, valueAccessor) {
        $(element).iCheck({
            radioClass: "iradio_square-green",
        });
        $(element).on('ifChanged', function () {
            var observable = valueAccessor();
            observable($(element)[0].checked);
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        if (value) {
            $(element).iCheck('check');
        } else {
            $(element).iCheck('uncheck');
        }
    }
};

var ViewModel = function () {
    var self = this;
    self.fixedPrice = ko.observable(true);
    self.allowBiding = ko.observable(false);

};
ko.applyBindings(new ViewModel());

使用单选按钮检查绑定 here

的工作示例

如果您正在寻找所选值,请尝试 this

答案 1 :(得分:0)

你需要“检查”绑定; - )

查看“添加单选按钮示例”中的页面: http://knockoutjs.com/documentation/checked-binding.html