Desabilitar Radio Button | jQuery

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Adriano Roberto de Araújo Cardoso

| 24k xp | 10 posts

Estou tentando criar um snippet para desabilitar botões do tipo radio usando os conhecimentos adquiridos no primeiro módulo do curso de JQuery. Já passei por essa situação antes e seria bom ter uma função dessa, fácil de entender no meu arsenal :)

Segue o HTML:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
      <meta charset="UTF-8">
      <title>Teste com radio</title>
  </head>
  <body>
    <div class="primeiro bloco">
      <h2>Botões Primários</h2>
      <input type="radio" name="primario" value="habilita"><span>Habilita</span>
      <input type="radio" name="primario" value="desabilita" checked><span>Desabilita</span>
    </div>
      <div class="botoes-secundarios">
      <h2>Botões Secundários</h2>
      <input type="radio" class="secundario" name="secundario"><span>Botão 1</span>
      <input type="radio" class="secundario" name="secundario"><span>Botão 2</span>
      <input type="radio" class="secundario" name="secundario"><span>Botão 3</span>
    </div>  
  </body>
</html>

E o JQuery:

$(document).ready(function(){
  var segundo = $(".secundario");

  $("input:radio").change(function(){  
      if($(this).val() == "desabilita"){
        segundo.prop('checked', false);
        segundo.prop('disabled', true);
      }else{
        segundo.prop('disabled', false);
      }
  });
})

Já estou martelando nessa questão faz tempo e ainda não descobri o que pode estar faltando. Alguém pode me ajudar?

JSFiddle

Grato desde já

2 respostas

solução!

por André Eduardo Pérez Álvarez

| 99.6k xp | 18 posts

Analista de Desenvolvimento de Sistemas

17/08/2018

Opa, blz?

Está tudo certo, apenas faltou a inclusão da biblioteca do jQuery.

Segue o HTML atualizado:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Teste com radio</title>
</head>

<body>
    <div class="primeiro bloco">
        <h2>Botões Primários</h2>
        <input type="radio" name="primario" value="habilita">
        <span>Habilita</span>
        <input type="radio" name="primario" value="desabilita" checked>
        <span>Desabilita</span>
    </div>
    <div class="botoes-secundarios">
        <h2>Botões Secundários</h2>
        <input type="radio" class="secundario" name="secundario">
        <span>Botão 1</span>
        <input type="radio" class="secundario" name="secundario">
        <span>Botão 2</span>
        <input type="radio" class="secundario" name="secundario">
        <span>Botão 3</span>
    </div>
</body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

<script>
    $(document).ready(function () {
        var segundo = $(".secundario");

        $("input:radio").change(function () {
            if ($(this).val() == "desabilita") {
                segundo.prop('checked', false);
                segundo.prop('disabled', true);
            } else {
                segundo.prop('disabled', false);
            }
        });
    })
</script>

</html>

Falou.

por Adriano Roberto de Araújo Cardoso

| 24k xp | 10 posts

18/08/2018

Oi André, muito obrigado!

Para quem se interessar eu ainda fiz uma pequena correção no script. Como eu queria que o botão de desabilitar por padrão estivesse setado, quando carrego a página pela primeira vez os radios não carregam como deveriam, estão habilitados. Então:

<script>
    $(document).ready(function () {
        var segundo = $(".secundario");

        segundo.prop('disabled', true); //Deixa por padrão os botões secundários desabilitados

        $("input:radio").change(function () {
            if ($(this).val() == "desabilita") {
                segundo.prop('checked', false);
                segundo.prop('disabled', true);
            } else {
                segundo.prop('disabled', false);
            }
        });
    })
</script>