Unselect items when moving between listboxes

Question

In my application I have two listboxes, one with "players available" and the other with "players climbed", as well as two buttons to move the items between them, >> and <<.

My problem is this. As soon as I select an item in one of the listboxes, and then click on an item in the OTHER listbox, the item that was clicked first is still selected.

I need a way to do the following. Example: First click on a name in the listbox on the left and the button >> to move the item to the right listbox if enabled. But then I realize that was not what I wanted and I click on some name of the RIGHT listbox this time. As now there is one selected in it, the button << is enabled. However, the first option clicked on the other listbox is still selected, and the button >> is still enabled. I need that when clicking on another listbox, all items that by chance have been selected in the previous listbox, are deselected.

Below follows an image of the problem, with the two move buttons enabled at the same time due to that problem I described above.

And below, follow the code that enables and disables the buttons:

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";
    }
}

Answer 1

Clear the selected ones from a select when the other onChange event is triggered (demo on: http://jsfiddle.net/xgohnnnu/2/):

escalados.onchange = function () {
    limpaSelecionados(disponiveis); 
};

disponiveis.onchange = function () {
    limpaSelecionados(escalados);
};

function limpaSelecionados(lista) {
    //define a opçao selecionada como -1. como o indice das opçoes do select começa em 0, nao seleciona nenhuma opçao
    lista.options.selectedIndex = -1;

    //CASO A ACIMA NAO FUNCIONE EM ALGUM BROWSER, TENTE A OPÇAO ABAIXO
    //for (var i = 0; i < lista.options.length; i++) {
      //  lista.options[i].selected = false;
    //}
}