仅当使用 Stimulus JS 选中至少一个 CheckBox 时才启用按钮答案

【问题标题】：Enable button only if at-least one CheckBox is checked using Stimulus JS仅当使用 Stimulus JS 选中至少一个 CheckBox 时才启用按钮
【发布时间】：2022-08-18 19:26:37
【问题描述】：

我正在使用 Rails 7，在我的一种形式中，我有多个复选框。如何在至少一个复选框被选中之前禁用提交按钮？

标签： ruby-on-rails

【解决方案1】：

这可能不是最好的解决方案，因为我是新手 - 但它有效:)

如果您以不同的方式解决了这个问题，请告诉我。

 #show.html.erb

    <%= form_with(url: your_path) do |f| %>
       <div data-controller="disable">
             <div>
                <%= f.check_box :test, { checked: false, data: { action: "change->disable#next" } } %>
             </div>
             <div>
                <%= f.check_box :test2, { checked: false, data: { action: "change->disable#next" } } %>
             </div>
             <div class="mb-10">
                <%= f.submit "Submit!", class: 
                   "w-full
                   rounded-md
                   bordder-primary
                   py-3
                   px-5
                   bg-primary
                   text-base text-white
                   cursor-pointer
                   hover:bg-opacity-90
                   transition", id: 'submit' 
                %>
             </div>
       </div>

<% end %>

和：

 #app/javascript/controllers/disable_controller.js

    import { Controller } from "@hotwired/stimulus"
    
    export default class extends Controller {
      connect() {
        document.getElementById('submit').disabled = true;
      }
      
      next(event) {
        var x = (document.getElementById("test").checked);
        var y = (document.getElementById("test2").checked);
        if (x == true || y == true) {
          document.getElementById('submit').disabled = false;
        }
      }
    }

【讨论】：