Clicking on the checkbox disables the button

1

I have the following code that automatically brings the freight value:

foreach($dados->cServico as $linhas) {

    if($linhas->Codigo == '04014'){
        $servico = "SEDEX";
    }
    if($linhas->Codigo == '04510'){
        $servico = "PAC";
    }
    echo "<input type='radio' name='Servico[]' value='".$linhas->Valor."' id='servicos' onclick='desabilitar()'> <strong>".$servico."</strong><br>";

}

With this code, I have the following result:

Aslongasyoudonotselectwhichmodeyouwant,thebuttonisdisabled.ForthisIamusingthefollowingcode:

functiondesabilitar(){if(document.getElementById('servicos').checked==true){document.getElementById('botao').disabled="";
        }
        if(document.getElementById('servicos').checked == false){
             document.getElementById('botao').disabled = "disabled";
        }
    }
<button type="submit" class="btn btn-primary col-lg-12 col-xs-12" style="margin-top: 10px" id="botao" disabled><h4>Finalizar <i class="fa fa-angle-double-right" aria-hidden="true"></i></h4></button>

The problem is when I select Sedex, the button works perfectly, but when I click on the cap, the button resets again. How do I make clicking the Sedex or PAC button enabled, otherwise the button is disabled?

    
asked by anonymous 29.10.2017 / 18:57

1 answer

1

You can not have duplicate IDs, HTML syntax only allows 1 unique ID per page.

Changes id='servicos' to class='servicos' classes or passes this to HTML like this: onclick='desabilitar(this)'> and then:

function desabilitar(el) {
  document.getElementById('botao').disabled = !el.checked;
}
    
29.10.2017 / 19:03