禁用并启用复选框和简单形式gem

时间:2018-01-10 18:30:42

标签: javascript jquery ruby-on-rails-4 twitter-bootstrap-3 simple-form

我试图在帖子表单上禁用并启用带复选框的操作。 而且我对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"

1 个答案:

答案 0 :(得分:0)

如果我理解你的话,唯一的方法就是使用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>