Tengo un html con algo de 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>Funciona cuando elimino enlaces de datos. Al hacer clic, colorea el botón azul con uno amarillo y el opuesto.
Pero, sin embargo, cuando agrego el enlace de datos: click ya no funciona. ¿Supongo que necesito adjuntar dinámicamente clases css en el evento de clic?
Comportamiento deseado: quiero tener data-bind="click: someFunction" pero cuando hago clic, tener un comportamiento css y tener una función que detecte cuándo está marcado el botón y cuándo no.
Sí, no estoy seguro de cómo manipular pseudoclases en el golpe de gracia, pero puede agregar y eliminar dinámicamente la clase CSS:
<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> tenga en cuenta que convertí su input:checked en input.checked .
Código en el modelo de vista:
self.checkedMultipleServicesButton = ko.observable(false); self.clickedMultipleServicesButton = function (e) { self.checkedMultipleServicesButton(!self.checkedMultipleServicesButton()); }