如何基于复选框改变input标签的样式？

核心思路 #

利用SolidJS的响应式信号createSignal跟踪复选框的选中状态，动态给提交按钮添加样式类并控制禁用状态，实现未勾选时按钮呈灰色且不可用的效果。

完整实现代码 #

import { createSignal } from 'solid-js';

function SignupForm() {
  // 定义跟踪复选框选中状态的响应式信号
  const [isChecked, setIsChecked] = createSignal(false);

  // 处理复选框的勾选状态变化
  const handleCheckboxToggle = (e) => {
    setIsChecked(e.target.checked);
  };

  return (
    <form>
      {/* 条款复选框 */}
      <label>
        <input 
          type="checkbox" 
          onChange={handleCheckboxToggle} 
          checked={isChecked()}
        />
        我同意服务条款和隐私政策
      </label>

      {/* 动态控制样式的提交按钮 */}
      <input
        type="submit"
        value="Sign up"
        {/* 根据复选框状态动态添加禁用样式类 */}
        class={`${!isChecked() ? 'disabled-submit' : ''}`}
        {/* 未勾选时禁用按钮，防止提交 */}
        disabled={!isChecked()}
      />
    </form>
  );
}

export default SignupForm;

配套CSS样式 #

/* 未勾选时的按钮样式 */
.disabled-submit {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  border: none;
  padding: 8px 16px;
}

/* 勾选后的正常按钮样式 */
input[type="submit"]:not(.disabled-submit) {
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 8px 16px;
}

关键说明 #

• 响应式状态管理：用createSignal创建的isChecked信号会自动跟踪复选框状态，状态变化时按钮的class和disabled属性会自动更新
• 动态样式绑定：通过模板字符串${!isChecked() ? 'disabled-submit' : ''}实现条件样式，无需额外的事件处理函数修改class
• 禁用按钮逻辑：添加disabled={!isChecked()}属性，不仅改样式，还能阻止按钮的提交行为，提升用户体验
• 关于标签：是用来条件渲染元素的，不适合用来修改元素样式，这里直接动态绑定属性更简洁

内容的提问来源于stack exchange，提问作者lbs91