javascript - 使用复选框和简单形式 gem 禁用和启用

Question

我正在尝试通过帖子表单上的复选框禁用和启用操作。而且我对 javascript 或 JQuery 不太了解。我经常尝试执行此操作，但我不知道如何执行，我正在独自编程。

因此，如果有人可以帮助我，我将不胜感激!我使用的是 Rails 4.2.8 和 jquery-rails-4.3.1 版本。

我的表单:app/views/posts/_form.html.slim

 = simple_form_for(@post, :html => { :multipart => true }) do |f|    = f.input :publish,
             label: "Publish?",
             as: :boolean,
             label_html: { class: "publish-check" },
             input_html: { checked: false },
             remote: true    = f.input :published_at, disabled: true, hint: 'You cannot publish your post.',label: "Publish Post at:"

我正在尝试将其放入文件app/assets/javascript/_form.coffee，可以吗，还是我需要放入另一个文件？

$(document).on "turbolinks:load", ->
  $checkbox = $('[id^="post_publish"]')
  $select = $('.post_published_at')
  $checkbox.change (e) ->
    $select.prop 'disabled', !$checkbox.is(':checked')
    return
  return

此字段已发布_时间为日期时间。所以我想现在我需要放置一些数组，生成的 id 类似于id="post_published_at_1i"，直到id="post_published_at_5i"

Answer 1

如果我理解正确的话，唯一的方法就是使用 javascript:

= simple_form_for(@post, :html => { :multipart => true }) do |f|
   = f.input :publish, label: "Publish?", as: :boolean, input_html: { checked: false }
   = f.input :published_at, label: "Publish Post at", style: "visibility: hidden;"

这将创建类似于下面的 HTML 部分的内容，因此，您只需将 javascript 添加到您的页面，并可能对其进行一些调整。

window.addEventListener('load', function() {
  document.getElementById('post_publish').addEventListener('change', function() {
    var input = document.getElementById('post_published_at')
    if (this.checked) {
      input.style.visibility = 'visible';
      input.disabled = false;
    } else {
      input.style.visibility = 'hidden';
      input.disabled = true;
    }
  });
});

<form id="new_post" action="/post" method="post">
  <input id="post_publish" type="checkbox">
  <label>Publish?</label>
  <input id="post_published_at" style="visibility: hidden;">
</form>