2

I have a form that looks like this enter image description here

Right now, the problem I am having is that the user can select more than 1 radio button. They should only be able to select 1. I have a Javascript function that will go through all the rows and disable the button that was not selected as seen here. 

function disableNonSelectedRadioButtons(selectedRadioButton) {
    $('#payer-contract-global-table .clone-target').each(function (i)  {
        var radioName = 'radio' + '-c' + i;
        if (selectedRadioButton != radioName)
            $('#' + radioName).prop("checked", false);
    });
}

This works. But I need to send the correct selectedRadioButton to this function. How can I correctly do that in Javascript?

Currently the HAML looks like this:

   %input.radio-button{:name => "radio-c#{index}", :type => "radio", :id => "radio-c#{index}", :checked => "true"}

Is there some type of code in Javascript that I can do that says that if I click button for radio-c2 it will send that to my function?

Mdjon26
  • 2,145
  • 4
  • 19
  • 29
  • Why can't you use regular HTML and [give your radio buttons the same name](http://stackoverflow.com/questions/5419459/how-to-set-that-only-one-radio-button-can-be-checked)? – Sébastien Vercammen Mar 02 '16 at 21:15
  • @Mdjon26 It's not clear what you asking for, clarify your issue more precisely. – divy3993 Mar 02 '16 at 21:16
  • Because from your Post it seems you just want is functionality that helps only one radio can be selected at a time, than you don't need javascript for that. Just do @SébastienVercammen mentioned. And if that is not what you want, elaborate more. – divy3993 Mar 02 '16 at 21:18

3 Answers3

3

If you want to use jQuery:

  $('input[type="radio"]').click(function(e){
       var selectedRadioName = $(this).attr('name');
       disableNonSelectedRadioButtons(selectedRadioName);
  });

If you're creating elements dynamically, use event delegation: https://learn.jquery.com/events/event-delegation/

 $(document).on('click', 'input[type="radio"]', function(e){
       var selectedRadioName = $(this).attr('name');
       disableNonSelectedRadioButtons(selectedRadioName);
 });

That said, you can just use HTML for this:

<input type="radio" name="giveThemAllTheSameName" />

By giving the radio buttons the same name you will only be able to select one.

Tate Thurston
  • 4,236
  • 1
  • 26
  • 22
  • The JQuery works in console, but doesn't work in my application. Why is that? Do I somehow need to activate it? – lakeIn231 Mar 02 '16 at 21:38
  • Make sure you have the jQuery source (Or CDN: "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js") script tags before the above code. You'll also want to delay the execution until the DOM loads. ie: $(document).ready(function(){ //above code }); – Tate Thurston Mar 02 '16 at 21:42
2

If you encounter that the event is not being triggered, It happens because the DOM element are being generated dynamically (I think...) I solve it like this:

$(document).on('click', 'input[type="radio"]', function(e){
   var selectedRadioName = $(this).attr('name');
   disableNonSelectedRadioButtons(selectedRadioName);
});

just in case.

DIEGO CARRASCAL
  • 1,999
  • 14
  • 16
0

You can use prop()

$('input[type="radio"]').click(disableNonSelectedRadioButtons($(this).prop('name')));
Mateusz Bartkowski
  • 709
  • 1
  • 12
  • 29