Rails 4：如何在Rails中使用JQuery禁用基於復選框值的文本字段

Question

我在表單中有一個復選框和一個文本字段。 如果選中此復選框，則我想禁用該字段（如果未選中，則希望啟用該字段）。

我嘗試根據此問題的第二個答案編寫一些jQuery： jQuery-啟用/禁用復選框

但是，即使未選中該字段，在加載頁面時也會禁用（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

Answer 1

問題來自以下事實：當您在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

Answer 2

您可以使用javascript / jquery來執行此操作，請查看此小提琴

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