Функция, которая позволяет поля, основанные на флажок государства


У меня есть простой код, который просто должен проверить, если checkbox проверяется и если это так, чтобы некоторые поля, которые, по умолчанию, должен быть отключен.

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

$(function(){    
$('#amount').attr('disabled','disabled');
            $('#period').attr('disabled','disabled');
            $('#key').attr('disabled','disabled');
            $('#api').change(function(){
                if($('#apiEnabled').is(':checked')){
                    $('#amount').attr('disabled','');
                    $('#period').attr('disabled','');
                    $('#key').attr('disabled','');
                }else{
                    $('#amount').attr('disabled','disabled');
                    $('#period').attr('disabled','disabled');
                    $('#key').attr('disabled','disabled');
                }
            });
});


418
5
задан 13 сентября 2011 в 10:09 Источник Поделиться
Комментарии
4 ответа

Трудно ответить точно, не видя ваши разметки, но, может быть, вы можете использовать несколько селекторов , чтобы облегчить избыточность кода. Вы также можете использовать опору() , чтобы включить или отключить элементы более легко:

$(function() {
var $elements = $("#amount, #period, #key");
$elements.prop("disabled", true);
$("#api").change(function() {
$elements.prop("disabled", !$("#apiEnabled").is(":checked"));
});
});

2
ответ дан 13 сентября 2011 в 10:09 Источник Поделиться

$(function(){    
var $els = $('#amount, #period, #key');
$('#api').change(function(){
var unchecked = !this.checked;
$els.each(function(){
$(this).prop('disabled', unchecked);
});
});
});

И, если это применимо изменения:

var $els = $('#amount, #period, #key');

К:

var $els = $('#api').siblings();


Пример Здесь:

http://jsfiddle.net/BpVkw/

0
ответ дан 13 сентября 2011 в 10:09 Источник Поделиться

Это мой взгляд на это, но если вы не будете нуждаться в отдельные элементы все на месте, затем принимать советы @Фредерик Хамиди и создать единый объект.

$(function(){
var $amount = $('#amount'), // cache jQuery objects
$period = $('#period'), // to avoid overhad
$key = $('#key'), // of fetching them
$apiEnabled = $('#apiEnabled'); // all the time
$amount.prop('disabled', true);
$period.prop('disabled', true);
$key.attr('disabled', true);
$('#api').change(function(){
if ($apiEnabled.is(':checked')) {
$amount.prop('disabled', false);
$period.prop('disabled', false);
$key.prop('disabled', false);
} else{
$amount.prop('disabled', true);
$period.prop('disabled', true);
$key.attr('disabled', true);
}
});
});

0
ответ дан 13 сентября 2011 в 10:09 Источник Поделиться

Вы можете кэшировать набор элементов, чтобы предотвратить jQuery с нетерпением их каждый раз, когда вы обратитесь к ним. Вы также можете сгруппировать их все в одном наборе, потому что вы подаете один и тот же код на всех трех из них.

опора может использоваться вместо attr, который Что нового в jQuery 1.6+. проп лучше подходит для галочки и настройки вещи, как инвалидов.

Теперь, когда все три элемента сгруппированы, у вас есть одно место (в галочки переменной), что вы можете добавить или удалить новые флажки. Это также означает более лаконичный код В изменить событие.

$(function(){

// Cache the elements
var checkboxes = $("#amount, #period, #key");

// Disable them using prop rather than attr (jquery 1.6+)
checkboxes.prop('disabled', true);

$("#api").change(function(){

if($('#apiEnabled').is(':checked')) checkboxes.prop('disabled', false);
else checkboxes.prop('disabled', true);

});

});

0
ответ дан 13 сентября 2011 в 10:09 Источник Поделиться