Rails 4：如何在 Rails 中使用 JQuery 禁用基于复选框值的文本字段

Posted 2023-05-09

【中文标题】Rails 4：如何在 Rails 中使用 JQuery 禁用基于复选框值的文本字段

【英文标题】：Rails 4: How to Disable Text Field Based on Checkbox Value Using JQuery in Rails

【发布时间】：2016-03-17 00:39:27

【问题描述】：

我在表单中有一个复选框和一个文本字段。如果复选框被选中，我想禁用该字段（如果未选中，我希望它被启用）。

我尝试根据这个问题的第二个答案编写一些 jQuery： jQuery - checkbox enable/disable

但是，当页面加载时，文本字段 (foo_price) 被禁用，即使该字段未选中。我做错了什么？

我正在使用Simple Form gem：

<%= simple_form_for @foo do |f| %>
  <%= f.input :free_flag, as: :boolean %>
  <%= f.input :price  %>

  <%= f.button :submit %>
<% end %>

表单呈现：

<form>
  <input class="boolean optional" type="checkbox" value="1" name="foo[free_flag]" id="foo_free_flag" />
  <input class="numeric decimal optional" type="number" step="any" value="12.99" name="foo[price]" id="foo_price" />
</form>

我的咖啡脚本：

enable_cb = ->
  $('#foo_price').prop 'disabled', !@checked
  return

  $ ->
    enable_cb()
    $('#foo_free_flag').click enable_cb
    return

【参考方案1】：

您可以使用 javascript/jquery 来执行此操作，请查看此fiddle

<input type = "text" class="txt1"/>
<input type="radio" class="radio1"/>

$(function()
$(".radio1").change(function()
alert($(".radio1").prop("checked"));
if($(".radio1").prop("checked") == true)
  $(".txt1").prop("disabled", true);
else
    $(".txt1").prop("disabled", false);

);
);

【讨论】：

嗯。我看到它适用于 JS Fiddle，但由于某种原因，这对我也不起作用。

【参考方案2】：

当您在 DOM 上使用 enable_cb() 直接加载属性 checked 时，问题就出现了，它指的是窗口对象而不是复选框元素

我建议使用change 事件而不是click 来检查checked 属性。您应该使用.trigger(event) 以编程方式执行事件处理程序。

enable_cb = ->
  $('#foo_price').prop 'disabled', !@checked
  return

$ ->
    $('#foo_free_flag').change enable_cb 
    .trigger('change')
    return

【讨论】：

感谢 Satpal。当我尝试此代码时，它的作用相同。无论复选框是否被选中，文本字段都会被禁用。

@yellowreign，您是在动态加载内容吗？

对不起，你的意思是表格变了吗？我在 Ruby on Rails Simple_Form gem 中创建表单。