Ruby on Rails Javascript禁用带有复选框的文本字段

时间:2014-02-07 23:33:50

标签: javascript html ruby-on-rails ruby forms

我目前正在使用以下字段的一个视图中使用form_for

<%= f.checkbox :free %>
<%= f.checkbox :rsvp %>

<%= f.textfield :price %>

此外,我完全迷失了如何在我的html / erb视图中实际嵌入javascript以使所有内容协同工作。

首先,我希望能够一次只允许其中一个使用。例如,如果选中一个框,则禁用另一个框和价格。如果输入了价格,则禁用这两个框。

我想我可以这样做:

$(document).ready(function () {
    $("#event_free").click(function () {
        if ($(this).is(":checked")) {
            $("#event_price").prop("disabled", true);
        } else {
            $("#event_price").prop("disabled", false);
        }
    });
});

当然这仅适用于免费复选框。必须有更好的方法来做到这一点。

2 个答案:

答案 0 :(得分:1)

要在.html.erb文件中嵌入javascript,请在​​文件中的任意位置使用以下内容:

<script type="text/javascript">
    //your javascript code here
</script>

答案 1 :(得分:0)

前段时间我遇到了类似的问题。这可能会对您有所帮助:

HTML:

<div data-limited-checkboxes data-limit="3">
  <input type="checkbox" checked />
  <input type="checkbox" checked />
  <input type="checkbox" checked />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

JS:

jQuery(function($) {
  var restrictCheckboxes = function(container) {
    var limit = $(container).data("limit");
    var checkboxes = $(container).find("input:checkbox");
    var selectedCount = checkboxes.filter(":checked").length;

    checkboxes.filter(":not(:checked)").prop("disabled", parseInt(limit) <= selectedCount);
  };

  $("[data-limited-checkboxes] input:checkbox").bind("change", function(checkbox) {
    restrictCheckboxes($(this).parents("[data-limited-checkboxes]"));
  });

  $("[data-limited-checkboxes]").each(function() {
    restrictCheckboxes($(this));
  });
});