using jquery to disable a series of radio buttons on demand.

Question

I'm trying to accomplish something similar to Wikipedia's History history page, dynamically disabling radio buttons in a series.

Ie... if #4 in group two is selected, then 1-4 of group one are disabled, etc.

I know how to disable them individually or as a group, but I'm not sure how to do it in a series of say 1-4:

Individually:

$("#version_history input[id^=versions_2_3]:radio").attr('disabled',true);

or group:

$("#version_history input[id^=versions_2]:radio").attr('disabled',true);

The inputs are named versions_1_X and versions_2_X, X being some number. 1..2..3.. etc.

My end goal is to feed the function the radio button that's clicked... and then disable all the radio boxes of the opposite group either above the number or below.

Answer 1

Given the following HTML:

<div id="version_history">
   <div class="version_history_item">
       <input type="radio" name="original">
       <input type="radio" name="update">
       <span>description</span>
   </div>
   ...
</div>

One possible approach is:

function updateVersionRadioButtonAvailability() {

    var versionHistoryElement = $('#version_history'),
        originalIndex = $('input[name=original]:checked', versionHistoryElement).parent('.version_history_item').index(),
        updateIndex = $('input[name=update]:checked', versionHistoryElement).parent('.version_history_item').index(),
        visibleStyle = { visibility: 'visible' },
        hiddenStyle = { visibility: 'hidden' };

    $('.version_history_item', versionHistoryElement).each(function(index) {
        $('input[name=original]', $(this)).css(index > updateIndex ? visibleStyle : hiddenStyle);
        $('input[name=update]', $(this)).css(index < originalIndex ? visibleStyle : hiddenStyle);
    });

}

$(document).ready(function() {
    $('#version_history input[name=original], #version_history input[name=update]').live('click', updateVersionRadioButtonAvailability);
    updateVersionRadioButtonAvailability();
});

Dry-coded so your mileage may vary.

Answer 2

I'm not quite sure if I understand what you are trying to accomplish, so I made this demo. Basically it disables all radio groups with lower version numbers of the selected group.

I don't know if you wanted to disable all of them as there would be no way to click them again, so I added a reset button as well.

Maybe if you clarified a bit more what exactly you want?