É possível resolver o problema de forma mais "genérica", isto é, criando uma espécie de grupo de campos usando classes CSS.
Um possível HTML ficaria assim:
<select class="meu_grupo" id="cbExercicio"><option value="0"></option><option value="1">1</option></select>
<select class="meu_grupo" id="cbEquipe"><option value="0"></option><option value="1">1</option></select>
<select class="meu_grupo" id="cbResponsavel"><option value="0"></option><option value="1">1</option></select>
Então o código fica assim:
$(function() {
$('.meu_grupo').change(function() {
//itera sobre os elementos
var falta_preencher = false;
$('.meu_grupo').each(function() {
if (!this.selectedIndex) falta_preencher = true;
});
//verifica o resultado
if (falta_preencher) alert('Preencha todos...')
else alert('Preencheu todos!');
})
});
Veja o jsfiddle funcionando.
A ideia é colocar um evento de mudança em todos os campos que possuem a classe meu_grupo
e, quando ocorrer um evento, verificar se todos os campos do mesmo grupo estão devidamente preenchidos.
Obviamente, o tipo de validação e a ação resultante de todos os campos estarem corretos fica a critério da implementação.
Note que vinculei o evento change
diretamente aos campos com a classe meu_grupo
, pois isto é mais eficiente que capturar todos os eventos do documento e filtrar apenas os campos desejados. A não ser que você tenha outras razões para o usar o manipulador on
no documento, dê preferência aos eventos específicos. Segue o mesmo exemplo usando o on
:
$(function() {
$(document).on('change', '.meu_grupo', function() {
//itera sobre os elementos
var falta_preencher = false;
$('.meu_grupo').each(function() {
if (!this.selectedIndex) falta_preencher = true;
});
//verifica o resultado
if (falta_preencher) alert('Preencha todos...')
else alert('Preencheu todos!');
})
});
Note também que a validação do meu exemplo fará uma conversão implícita do texto "0" para false
. O efeito seria o mesmo se o valor do primeiro elemento fosse vazio.