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

【问题标题】：using jquery to disable a series of radio buttons on demand使用 jquery 按需禁用一系列单选按钮
【发布时间】：2011-02-14 01:31:03
【问题描述】：

我正在尝试完成类似于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..等

我的最终目标是为该功能提供单击的单选按钮...然后禁用相对组的所有单选框，无论是高于还是低于数字。

【问题讨论】：

标签： jquery ruby-on-rails input radio-button

【解决方案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();
});

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

【讨论】：

+1：我知道现在的问题是什么（hangs head），但是当我尝试您的代码时，我发现索引存在一些问题。每个索引的versionHistoryElement 需要不同：对于原始索引，它需要[input=original]，并且与更新相同。因此不能在下面的.each()函数中使用。
fudgey：我不明白您所说的 versionHistoryElement 需要对每个索引都不同。代码中唯一的错误是originalIndex 和updateIndex 的分配。他们都错过了对 parent 函数的调用。
好的，看起来你已经修好了。您正在从.version_history_item 索引，而我正在通过分别索引每一列来查看它。无论哪种方式都有效：P

【解决方案2】：

我不太确定我是否理解您要完成的工作，所以我创建了this demo。基本上它会禁用所选组的版本号较低的所有无线电组。

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

如果你再澄清一下你到底想要什么？

【讨论】：

嗯，就是这样......如果你看看en.wikipedia.org/w/…，你会明白我想要做什么。
是的，现在我已经看到了 Ken 的代码，我明白了你想要什么。我必须调整一些东西才能让他的代码正常工作......我会在他的帖子中发表评论。