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

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.

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

• javascript
• jquery
• html
• radio-button

4 Answers 4

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

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

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

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

});