CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
Ax_Npi
Ax_Npi

Reputation: 23

Multiple radio buttons, one selected

The title is probably a little vague. So let me explain.

I have a page where users can choose what day they want to have their appointment on. However, we give them multiple choices for this day, incase the first choice was full

The radio button HTML:

<input type="radio" class="my-radio" value="monday" name="my_form[day][choice1][]"
id="monday1"/>
<label for="monday1">Monday</label>

<input type="radio" class="my-radio" value="tuesday" name="my_form[day][choice1][]"
id="tuesday1"/>
<label for="tuesday1">Tuesday</label>

<input type="radio" class="my-radio" value="wednesday" name="my_form[day][choice1][]"
id="wednesday1"/>
<label for="wednesday1">Wednesday</label>

<input type="radio" class="my-radio" value="thursday" name="my_form[day][choice1][]"
id="thursday1"/>
<label for="thursday1">Thursday</label>

<input type="radio" class="my-radio" value="friday" name="my_form[day][choice1][]"
id="friday1"/>
<label for="friday1">Friday</label>

<input type="radio" class="my-radio" value="saturday" name="my_form[day][choice1][]"
id="saturday1"/>
<label for="saturday1">Saturday</label>

This gets repeated another two times. Though, the ids are changed and the names are aswell. So for the second it would be, (for monday); id=monday2, name=my_form[day][choice2][], and so on.

So to make it clear. 3 rows of radios, all the same values, but ids and names are different.

Now when monday is checked, doesn't matter in which row, I want to disable all other mondays. Now if I instead select Tuesday, all Mondays should be enabled again.

The first part i've got working with jQuery;

jQuery('.my-radio').change(function () {
// Get all elements associated to value, but the currently selected radio.
var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id'));

  // Disable every element that we found
  jQuery(associates).each(function(){
     jQuery(this).prop('disabled', true);
  });
});

Now my only problem is the second part. Re-enable the previous disabled radios.

A JSFiddle to make it a little more clear; http://jsfiddle.net/Hr9h2/1/

Edit: Thanks alot for the answers.

However, I forgot to mention that you're not allowed to select, for example, Monday three times or even twice.

Upvotes: 1

Views: 5125

Answers (4)

federicot
federicot

Reputation: 12341

This might be what you're looking for:

$('.my-radio').click(function () {
    // When a radio button is clicked
    $('.my-radio').each(function () {
        // Enables all radios buttons
        $('.my-radio').prop('disabled', false);
    });

    // Disables all radio buttons with same value as this, except this one
    $('input[value="' + $(this).val() + '"]').not(this).prop('disabled', true);

});

Upvotes: 0

bipen
bipen

Reputation: 36531

Think it's simple.. just enable all radio buttons on its change event before disabling particular radio button.

Here's the JS

jQuery('.my-radio').change(function () {
    jQuery('.my-radio').prop('disabled', false); //<---here
    // Disable all elements associated to value
    var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id'));
    associates.prop('disabled', true);
});

NOTE:

You don't have to use each loop to get all the associates. The associate variable will already have all the elements. And here's a fiddle at jsFiddle.net

Upvotes: 0

adeneo
adeneo

Reputation: 318182

The functionality you're looking for is created by enabling all the radio buttons, and looping over all the checked radio buttons and disabling any that has the same value. That way it works with as many lines of radio buttons you'd like :

$('.my-radio').on('change', function () {
    $('.my-radio').prop('disabled',false).filter(':checked').each(function() {
        $('.my-radio[value="' + this.value + '"]:not(:checked)').prop('disabled', true);
    });
});

FIDDLE

Upvotes: 7

krishwader
krishwader

Reputation: 11371

Some more refactoring to the code : 

$('.my-radio').change(function () {
    //enable all radio buttons
    $(".my-radio").prop("disabled", false);
    // Disable all elements associated to value
    $('.my-radio[value="' + this.value + '"]').not(this).prop('disabled', true);
});

Upvotes: 0

Related Questions