How to change onClick button in knockoutjs

Question

I have a html with some 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>

It works when I remove data-bindings. On click it colors the blue button a yellow one and opposite.

But however, when I add data-binding: click it doesnt work anymore. I assume that I need to dynamically attach css classes on click event?

Desired behavior: I want to have data-bind="click: someFunction" but when I click, to have css behavior, and to have function that will catch when is the button checked, and when it is not.

Answer 1

Yes I'm not sure how to manipulate pseudo-classes in the knockout but you can dynamically add and remove 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>

note that I turned your input:checked into input.checked .

Code in the view model:

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