jquery - 使用jquery按需禁用一系列单选按钮

Question

我正在尝试完成类似于Wikipedia's History的事情历史页面，动态禁用一系列单选按钮。

即...如果选择第二组中的#4，则禁用第一组中的 1-4，依此类推。

我知道如何单独或作为一个组禁用它们，但我不知道如何在一系列 1-4 中执行此操作:

个人:

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

或组:

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

输入被命名为 versions_1_X 和 versions_2_X，X 是某个数字。 1..2..3..等

我的最终目标是为该函数提供单击的单选按钮...然后禁用相反组的所有单选框(无论是在数字上方还是在数字下方)。

Answer 1

给定以下 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>

一种可能的方法是:

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

干编码，因此您的里程可能会有所不同。