0

Tengo un Formulario con 4 input de tipo radio y un boton para enviar el formulario el cual lo trabaje con jquery.

1- Logre hacer check y uncheck en los radio button pero el codigo es algo extenso y me gustaria poder tenerla mas simplificado.

2- El boton de enviar debe habilitarse cuando al menos 1 de los radio button este check y deshabilitarse cuando los radio button esten uncheck o se haga check y uncheck y todos los radio button queden uncheck.

HTML


<input type="radio" class="radio1 r" value="0">
<br>
<input type="radio" class="radio2 r" value="0">
<br>
<input type="radio" class="radio3 r" value="0">
<br>
<input type="radio" class="radio4 r" value="0">
<br>
<br>
<button class="btn" disabled="disabled">
Enter
</button>

JS-Jquery

var radio1 = false;
$(".radio1").click(function () {
        if (radio1 == false) {
            $(this).prop("checked", true);
            $(this).prop("value", "1");
            radio1= true;

        }

        else if (radio1 == true) {
            $(this).prop("checked", false);
            $(this).prop("value", "0");            
            radio1= false;            
        }
    });

var radio2 = false;
    $(".radio2").click(function () {
        if (radio2 == false) {
            $(this).prop("checked", true);
            $(this).prop("value", "1");
            radio2= true;
        }

        else if (radio2 == true) {
            $(this).prop("checked", false);
            radio2= false;
        }
    });

    var radio3 = false;
    $(".radio3").click(function () {
        if (radio3 == false) {
            $(this).prop("checked", true);
            $(this).prop("value", "1");
            radio3= true;
        }

        else if (radio3 == true) {
            $(this).prop("checked", false);
            radio3= false;
        }
    });

    var radio4 = false;
    $(".radio4").click(function () {
        if (radio4 == false) {
            $(this).prop("checked", true);
            $(this).prop("value", "1");
            radio4= true;
        }

        else if (radio4 == true) {
            $(this).prop("checked", false);
            radio4= false;
        }
    });

function calcscore(){
    var score = 0;
    $(".r:checked").each(function(){
        score+=parseInt($(this).val(),10);

         if( score > 0 )
          $('.btn').prop('disabled',false);
        else
          $('.btn').prop('disabled',true);
    });
    $("input[name=sum]").val(score)
}
$().ready(function(){
    $(".r").change(function(){
        calcscore()
    });
});

pueden verlo en ejecucion aquí

Muchas gracias por su ayuda

1
  • El propósito específico de un grupo de botones radio es para que el usuario solo pueda elegir uno. Los checkboxes aportan el funcionamiento que buscas aquí.
    – AFOC
    Commented el 14 abr. 2020 a las 4:22

1 respuesta 1

1

Creo que forzar un radio button a que se comporte como un checkbox a través de código js, no es lo correcto. Tomé tu código y lo ajusté para usar checkbox en vez de radio como type, así te ahorras de poner todos esos $(".radio").click que no serían necesarios. Aparte le agregué valores distintos a los inputs, para ver cómo se comporta el código. Revisa además los cambios en la función calcscore.

function calcscore(){
    let score = 0;
    let checked = $(".r:checked");
    if(checked.length > 0) {
      checked.each(function(){
          score+=parseInt($(this).val(),10);
           if( score > 0 )
            $('.btn').prop('disabled',false);
          else
            $('.btn').prop('disabled',true);
      });    
    } else {
      $('.btn').prop('disabled',true);
    }
    $("input[name=sum]").val(score)
}
$().ready(function(){
    $(".r").change(function(){
        calcscore()
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="r" value="0">0
<br>
<input type="checkbox" class="r" value="1">1
<br>
<input type="checkbox" class="r" value="2">2
<br>
<input type="checkbox" class="r" value="3">3
<br>
<input name="sum">
<br>

<button class="btn" disabled="disabled">
Enter
</button>

1
  • Muchas gracias, toda la razon en que es mejor emplear los checkbox en vez de radio Commented el 23 abr. 2020 a las 19:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.