【问题标题】:Ruby on Rails Javascript to Disable Text Field With CheckboxRuby on Rails Javascript 使用复选框禁用文本字段
【发布时间】:2014-02-07 23:33:50
【问题描述】:

我目前在我的一个视图中使用 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);
        }
    });
});

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

【问题讨论】:

  • 您只想选择其中一个复选框,radio options 有什么问题?
  • 我认为使用单选按钮最终会选择其中一个。然而在这种情况下,文本框也需要启用/禁用
  • 您当前的 jQuery 脚本只需稍作修改即可使用
  • 除了为每个按钮和文本框添加明显的其他条件外,以什么方式修改?我的主要问题是如何将脚本包含在嵌入的 ruby​​ 文件中。
  • 我是红宝石的菜鸟,所以不能推荐你

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


【解决方案1】:

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

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

【讨论】:

    【解决方案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));
      });
    });
    

    【讨论】:

      猜你喜欢
      • 2022-01-27
      • 1970-01-01
      • 1970-01-01
      • 2012-12-19
      • 2015-02-08
      • 2013-07-24
      • 2016-03-17
      • 2014-11-13
      • 1970-01-01
      相关资源
      最近更新 更多