Habilitar/Desabilitar botões obedecendo condições

angeloleal · 10 de outubro de 2014

Olá.

Estou criando uma aplicaçãozinha em HTML, PHP e JavaScript, que simula a escalação de jogadores para uma dada partida. Segue abaixo um print.

Preciso fazer com que os botões ">>", "<<" e "Salvar" iniciem desabilitados e passem a ser habilitados seguindo algumas condições.

O botão ">>" só deve ser habilitado se algum jogador no listbox dos Disponiveis, estiver selecionado, caso contrário, deve permanecer desabilitado.

O botão "<<" só deve ser habilitado se algum jogador no listbox dos Escalados, estiver selecionado, caso contrário, deve permanecer desabilitado.

O botão "Salvar" só deve ser habilitado caso o campo Data esteja preenchido, e caso existam exatamente 5 jogados escalados.

Poderiam me ajudar a fazer essa jogada de habilitar/desabilitar botões? É a primeira vez que estou tendo que fazer isso em Javascript, e estou enfrentando certas dificuldades.

Agradeço desde já pela ajuda pessoal. Fico no aguardo.

DiF · 10 de outubro de 2014

Olá,

como tentou fazer? apenas postar um print e as condições não ajudam.

angeloleal · 15 de outubro de 2014

Olá, desculpe a demora em responder.

Bom, eu tentei fazer a função que controla a ativação/desativação dos botões dessa maneira:

function habilitarBotoes(){		var disponiveis = document.getElementById("jogadores_disponiveis");		var escalados = document.getElementById("jogadores_escalados");		var toRight = document.getElementById("toRight");		var toLeft = document.getElementById("toLeft");		var salvar = document.getElementById("salvar");		var data = document.getElementById("data");		if((getOpts(disponiveis).length > 0) && (getOpts(disponiveis).length + escalados.length <= 5)){			toRight.disabled = "";		} else { 			toRight.disabled = "disabled"; 		}		if(getOpts(escalados).length > 0){			toLeft.disabled = "";		} else {			toLeft.disabled = "disabled";			}		if((escalados.options.length == 5) && (CheckDate(data) == true) ){			salvar.disabled = "";		} else {			salvar.disabled = "disabled";		}	}

Chamo essa função pelo "onFocus" em todos os campos da página. Minha ideia ao fazer era que não interessa onde o usuário clicar, essa função sempre verificaria se os botões deveriam ser ou não habilitados. Porém estou com um probleminha.

Quando seleciono uma opção do listbox dos Disponíveis por exemplo, e depois clico em algum dos Escalados, a opção que foi clicada primeiro no listbox anterior ainda continua selecionada, o que habilita o botão ">>". E como acabei de selecionar uma opção dos Escalados, o botão "<<" também fica disponível.

Segue print do probleminha:

Reparem que o "Rubens Osorio" está selecionado ainda, mesmo após eu clicar no "Osnei Cunha" no outro listbox. Reparem também nos dois botões habilitados ao mesmo tempo.

Poderiam me ajudar a solucionar este probleminha?

PS.: getOpts e CheckDate são outras funções que possuo, a primeira retorna um array com todos os selecionados no listbox e a segunda trat da validação do campo 'Data'.