如何根据复选框更改输入标签的样式？答案

【问题标题】：How to change style of input tag based on checkbox?如何根据复选框更改输入标签的样式？
【发布时间】：2023-02-13 02:49:18
【问题描述】：

我有输入表单和输入标签作为按钮。在我能够制作一个按钮根据点击它改变样式之前，但现在我尝试将此输入设为灰色，直到用户选中该复选框。我尝试使用 <Show> 和 when 属性，但我不能在 <Show> 标签上使用 when。然后我尝试使用 onChange 属性，它似乎没有给我任何错误。我只是不明白如何更改 class=" 中的样式，然后将其连接到复选框功能？我的复选框是使用createSignal制作的

有任何想法吗？

   <input
      onChange={functionForStyling}
      name="submit"
      type={"submit"}
      value={"Sign up"}
      class=""
    />

【问题讨论】：

输入需要一个 disabled 道具，这可能是您正在寻找的。
这回答了你的问题了吗？ Conditional styling in SolidJS

标签： reactjs tailwind-css solid-js

【解决方案1】：

将类分配给复选框元素与将其分配给任何 html 元素没有什么不同。

以下是如何有条件地将类分配给 html 元素。

import { createSignal, JSX } from 'solid-js';
import { render } from 'solid-js/web';

const App = () => {
  const [isChecked, setIsChecked] = createSignal(true);

  const toggle = () => setIsChecked(c => !c);

  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {
    setIsChecked(event.currentTarget.checked);
  };

  return (
    <div>
      <style>{`
      input.checked {
        transform: rotate(45deg);
      }
      
      input.unchecked {
        transform: rotate(45deg);  
      }
      `}</style>
      <input
        type='checkbox'
        class={isChecked() ? 'checked' : 'unchecked'}
        checked={isChecked()}
        onChange={handleChange}
      />
      {` `}
      <button onclick={toggle}>Toggle</button>
    </div>
  );
};

render(() => <App />, document.body);

https://playground.solidjs.com/anonymous/163ffec6-1293-4702-9ef6-0425461328c3

请记住，为复选框设置样式并不是那么简单。您需要使用伪选择器等。

【讨论】：