отключить некоторые выпадающие элементы управления, когда пользователь нажимает на флажок

Question

у меня есть выпадающий список времени, который показывает часы в одном выборе, минуты в другом и AM / PM в третьем. У меня есть флажок "Весь день"

Я хочу, чтобы, когда пользователь выбирает «Весь день», все выбранные выпадающие списки отключались.

Answer 1

Проблема с флажками состоит в основном в том, чтобы заставить их работать правильно в IE6, так как событие change срабатывает при любых обстоятельствах.

Давайте начнем с функции отключения:

function onCheckChange() {
  if ($("#all-day-checkbox").is(':checked'))
    $("select").attr('disabled', 'disabled');
  else
    $("select").removeAttr('disabled');
}

Обратите внимание, что здесь я использую только select, что почти наверняка шире, чем вы хотели бы, но select.some-class-to-identify-the-hours-and-minutes-and-seconds-dropdowns будет работать так же хорошо.

Также обратите внимание, что функция сама выясняет, установлен ли флажок, делая его идемпотентным: во время проверки флажка безопасно вызывать повторно.

Теперь нам просто нужно привязать эту функцию к нескольким различным событиям:

$("#all-day-checkbox").click(onCheckChange).change(onCheckChange);
$("label[for=all-day-checkbox]").click(onCheckChange);

Answer 2

Попробуйте это.

$('#checkbox').change(function(){
    $('#Hour, #Minute, #Period').attr('disabled', this.checked);    
}); 

Answer 3

$('#allday').toggle(
    function(){
        $('#hour, #minutes, #am-pm').attr('disabled', 'disabled');
    },
    function(){
        $('#hour, #minutes, #am-pm').removeAttr('disabled');
    }
);