How enable button on check the radiobutton

Question

I have a foreach that contain 3 radio buttons, how do I enable a specific button when the radio button is checked? I have this:

// Starts by disabling all the buttons
$('.btn-portabilizar').attr('disabled', true);

// If it is checked, enable the a specific button
$('input[name="autorizacao"]:checked').click(function(){
   $('.btn-portabilizar').removeAttr('disabled');
});

And my view is this:

<% @autorizacoes.each do |autorizacao| %>
    <tr>
        <td><%= radio_button_tag 'autorizacao', autorizacao.numero_contrato %></td>
        <td><%= autorizacao.numero_contrato %></td>
        <input class="string required" type="text" name="portabilidade_nova_parcela" id="portabilidade_nova_parcela">
        </td>
        <td>
            <%= link_to "Portabilizar", "#", :class => 'btn btn-primary btn-portabilizar' %>
        </td>
    </tr>
<% end %>

Sorry for code in portuguese...

UPDATE ==========================================

When checked enable button, when unchecked disable button, I do it, but don't work:

  $('input[name="autorizacao"]').click(function(){
    if (this.checked) {
      $(this).closest('tr').find('.btn-portabilizar').prop('disabled', false);
    }
    else
      $(this).closest('tr').find('.btn-portabilizar').prop('disabled', true);

  });

What is my wrong?

just set disabled to false – thatOneGuy May 12 '16 at 15:33 — thatOneGuy, May 12 '16 at 15:33

Rory McCrossan · Accepted Answer · 2016-05-12T15:42:35.987

2

Your radio button selector is incorrect - you only attach it to radio buttons which are already checked on load, of which I'm assuming there are none. Remove the :checked part:

$('input[name="autorizacao"]').click(function(){
    $('.btn-portabilizar').prop('disabled', false);
});

Also note that it's better practice to use prop() where possible.

To only affect the button in the same row you would need to use jQuery's DOM traversal methods, like this:

$('input[name="autorizacao"]').click(function(){
    $(this).closest('tr').find('.btn-portabilizar').prop('disabled', false);
});

edited May 12 '16 at 15:42

answered May 12 '16 at 15:36

Rory McCrossan

331,213
40
305
339

what is difference? I always use attr and removeAttr instead of prop – Elton Santos May 12 '16 at 15:38
1

`prop()` sets the property of the DOMElement without having to a access the DOM directly. In other words it performs better. – Rory McCrossan May 12 '16 at 15:38
@EltonSantos see [this question](http://stackoverflow.com/q/5874652/519413) for a complete answer on the subject – Rory McCrossan May 12 '16 at 15:41
hmmm thanks man!! But I have other problem, how enable just the button specific?? When I do what you say I enable all buttons... I need enable just the checked... – Elton Santos May 12 '16 at 15:41
Do you can help one more time? I updated my question – Elton Santos May 13 '16 at 19:34

How enable button on check the radiobutton

1 Answers1