Rails 4: How to Disable Text Field Based on Checkbox Value Using JQuery in Rails

Question

I have a check box and a text field in a form. If the checkbox is checked, I want to disable the field (and if it's unchecked, I want it to be enabled).

I tried to write some jQuery based on the second answer for this question: jQuery - checkbox enable/disable

However, the text field is (foo_price) is disabled when the page loads even though the field is unchecked. What am I doing wrong?

I'm using the Simple Form gem:

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

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

The form renders:

<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>

My Coffeescript:

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

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

Satpal · Answer 1 · 2015-12-11T07:09:25.357

0

The problem arise from the fact when you use enable_cb() on DOM load directly the property checked its refers to window object rather than checkbox element

I would recommend the usage of change event instead of click for checking the checked property. You should use .trigger(event) to programmatically execute the event handler.

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

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

edited Dec 11 '15 at 07:09

answered Dec 11 '15 at 07:04

Satpal

132,252
13
159
168

Thanks Satpal. When I try this code, it acts the same. The text field is disabled regardless of if the checkbox is checked. – yellowreign Dec 11 '15 at 07:13
@yellowreign, Are you loading content dynamically? – Satpal Dec 11 '15 at 07:30
Sorry, do you mean does the form change? I'm in Ruby on Rails Simple_Form gem to create forms. – yellowreign Dec 11 '15 at 07:35

score 0 · Accepted Answer · answered Dec 11 '15 at 07:19

0

You can make use of javascript/jquery to do this, check this out this 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);
}
});
});

answered Dec 11 '15 at 07:19

user3239866

66
8

1

Hmmm. I see it works on JS Fiddle, but for some reason this doesn't work for me either. – yellowreign Dec 11 '15 at 07:38

Rails 4: How to Disable Text Field Based on Checkbox Value Using JQuery in Rails

2 Answers2