Question

我正在尝试完成类似于Wikipedia's History历史记录页面的操作，动态禁用系列中的单选按钮。

即......如果选择组2中的＃4，则组1中的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，version_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();
});

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

Answer 2

我不太确定我是否明白你想要完成什么，所以我做了this demo。基本上它会禁用所选组的版本号较低的所有无线电组。

我不知道你是否想要禁用所有这些，因为无法再次点击它们，所以我也添加了一个重置按钮。

也许如果你更清楚地说明你想要什么？

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

2 个答案: