如何在 knockoutjs 中更改 onClick 按钮

Question

我有一个 html 和一些 css:

<label class="label-checkbox">
    <input type="checkbox" data-bind="click: clickedMultipleServicesButton, checked: checkedMultipleServicesButton, css: {checked: true}">

    <span style="font-size:14px !important">Test Button</span>
</label>
<style>
    label.label-checkbox {
        cursor: pointer;
    }

    label.label-checkbox input {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        pointer-events: none;
    }

    label.label-checkbox span {
        padding: 8px 11px;
        border: 1px solid #ccc;
        display: inline-block;
        color: #ffffff;
        border-radius: 6px;
        margin: 7px;
        background: #253965;
        user-select: none;
    }

    label.label-checkbox input:checked + span {
        box-shadow: inset 1px 2px 5px #777;
        transform: translateY(1px);
        background: #ffd800;
    }
</style>

当我删除数据绑定时它会起作用。单击它会将蓝色按钮着色为黄色并与之相反。

但是，当我添加数据绑定时：click 它不再起作用了。我假设我需要在点击事件上动态附加 css 类?

期望的行为：我想要 data-bind="click: someFunction"，但是当我点击时，有 css 行为，并且具有可以捕获按钮何时被选中以及何时未被选中的功能。

Answer 1

是的，我不确定如何在淘汰赛中操纵伪 classes，但您可以动态添加和删除 CSS class:

<label class="label-checkbox" >
        <input type="checkbox" data-bind="click: clickedMultipleServicesButton, css: checkedMultipleServicesButton() && 'checked'"/>

        <span style="font-size:14px !important">Test Button</span>
    </label>
    <style>
        label.label-checkbox {
            cursor: pointer;
        }

            label.label-checkbox input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                pointer-events: none;
            }

            label.label-checkbox span {
                padding: 8px 11px;
                border: 1px solid #ccc;
                display: inline-block;
                color: #ffffff;
                border-radius: 6px;
                margin: 7px;
                background: #253965;
                user-select: none;
            }

            label.label-checkbox input.checked + span {
                box-shadow: inset 1px 2px 5px #777;
                transform: translateY(1px);
                background: #ffd800;
            }
    </style>

注意我把你的 input:checked 变成了 input.checked。

视图模型中的代码：

self.checkedMultipleServicesButton = ko.observable(false);
self.clickedMultipleServicesButton = function (e) {      
  self.checkedMultipleServicesButton(!self.checkedMultipleServicesButton());
}

如何在 knockoutjs 中更改 onClick 按钮

How to change onClick button in knockoutjs

javascript

html

css

knockout.js