использование jquery для отключения ряда переключателей по запросу

Я пытаюсь сделать что-то похожее на историю Википедии. страница, динамически отключающая переключатели в серии.

То есть... если выбран #4 во второй группе, то 1-4 в первой группе отключены и т.д.

Я знаю, как отключить их по отдельности или в группе, но я не уверен, как это сделать в серии, скажем, 1-4:

Индивидуально:

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

3]:radio").attr('disabled',true);

или группа:

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

Входные данные называются версии

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

3]:radio").attr('disabled',true);
X и версии
$("#version_history input[id^=versions_2]:radio").attr('disabled',true);
X, где X — некоторое число. 1..2..3.. и т.д.

Моя конечная цель - передать функции нажатую кнопку-переключатель... а затем отключить все переключатели противоположной группы либо выше числа, либо ниже.


ruby-on-rails input jquery radio-button
person holden    schedule 30.04.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Учитывая следующий 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();
});

Сухой код, поэтому ваш пробег может отличаться.

person Ken Browning    schedule 30.04.2010
comment
+1: теперь я понимаю, что задает вопрос (висит голова), но когда я попробовал ваш код, я обнаружил пару проблем с индексацией. versionHistoryElement должен быть разным для каждого индекса: для оригинала требуется [input=original] и то же самое с обновлением. Поэтому его нельзя использовать в функции .each() ниже. - person Mottie; 30.04.2010
comment
fudgey: я не понимаю, что вы говорите о том, что versionHistoryElement должен быть разным для каждого индекса. Единственная ошибка с кодом была в назначении originalIndex и updateIndex. У них обоих отсутствовал вызов функции parent. - person Ken Browning; 01.05.2010
comment
Хорошо, похоже, вы исправили это. Вы индексировали из .version_history_item, а я смотрел на него, индексируя каждый столбец отдельно. В любом случае работает :P - person Mottie; 02.05.2010

arrow_upward
1
arrow_downward

Я не совсем уверен, понимаю ли я, чего вы пытаетесь достичь, поэтому я сделал эту демонстрацию. По сути, он отключает все радиогруппы с более низкими номерами версий выбранной группы.

Я не знаю, хотели ли вы отключить их все, так как не было бы возможности щелкнуть их снова, поэтому я также добавил кнопку сброса.

Может быть, если бы вы уточнили немного больше, что именно вы хотите?

person Mottie    schedule 30.04.2010
comment
Ну, примерно так... если вы посмотрите на en.wikipedia. org/w/ вы увидите, что именно я пытаюсь сделать. - person holden; 30.04.2010
comment
Да, теперь, когда я увидел код Кена, я понял, что вы хотите. Мне пришлось кое-что настроить, чтобы его код заработал... Я сделаю комментарий в его посте. - person Mottie; 30.04.2010