Ruby on Rails Javascript以禁用帶有復選框的文本字段

Question

我目前在其中一個具有以下字段的視圖中使用form_for

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

<%= f.textfield :price %>

另外，我完全不知道如何將javascript實際嵌入我的html / erb視圖中以使所有內容協同工作。

首先，我希望一次只能使用其中一個。 例如，如果選中一個框，則另一框和價格被禁用。 如果輸入了價格，則兩個框將被禁用。

我想我可以做些類似的事情：

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

當然，這僅適用於免費復選框。 必須有一個更好的方法來做到這一點。

Answer 1

要將javascript嵌入.html.erb文件中，請在文件中的任何位置使用以下代碼：

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

Answer 2

前一段時間，我面臨着類似的問題。 這可能對您有幫助：

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));
  });
});