Enable button by clicking on a checkbox

Asked

Viewed 58 times

-2

Hello, I’m trying to get that by pressing the checkbox written "Yes", enable the send button. But I can only do that if I hit the "No" button too.

Follow the HTML code:

    <label>Sim</label>
    <input type="checkbox" id="sim" name="sim" ng-model="sim" required>

    <label>Não</label>
    <input type="checkbox" id="nao" name="nao" ng-model="nao" required>

Follows the script:

<script>
  
    let mudar = document, [inputs, validar] = [
        mudar.querySelectorAll('[type="checkbox"]'),
        mudar.querySelector('#btnsend')] 

        validar.disabled = true
    
    for (i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('input',() => {
        let values = []
        inputs.forEach(v => values.push(v.value))
        validar.disabled = values.include('')
    })
}
</script>
javascript

  • Please clarify your specific problem or provide Additional Details to Highlight Exactly what you need. As it’s Currently Written, it’s hard to Tell Exactly what you’re asking.

2 answers

0


I did it in a more extensive way and it can certainly be improved, but for now, it’s functional!

SCRIPT & HTML: 

$(document).ready(function() {
  $("input:checkbox").on('click', function() {
    var $box = $(this);
    if ($box.is(":checked")) {
      var group = "input:checkbox[name='" + $box.attr("name") + "']";

      $(group).prop("checked", false);
      $box.prop("checked", true);
    } else {
      $box.prop("checked", false);
    }
  });
});

$(document).ready(function() {
  $('#sim').click(function() {
    if ($('#sim').is(':checked')) {
      $('#btn').attr('disabled', false);
    } else {
      $('#btn').attr('disabled', true);
    }
  });
  $('#nao').click(function() {
    if ($('#nao').is(':checked')) {
      $('#btn').attr('disabled', true);
    } else {
      $('#btn').attr('disabled', true);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <!-- checkbox do "sim" -->
  <label>
            <input type="checkbox" name="fooby[1][]" id="sim" />Sim</label>

  <!-- checkbox do "não" -->
  <label>
            <input type="checkbox" name="fooby[1][]" id="nao" />Não</label>

  <!-- botão -->
  <input type="submit" name="btn" id="btn" disabled value="botão"></input>
</div>

-3

I can give you an alternative, simpler and more functional.

Instead of using checkbox, use the type fields "radio" with the same name. Because it will accept only one of the two options, whereas the checkbox would accept to select both at the same time. Thus using "radio" and selecting the NÃO automatically deselects the SIM.

So we created an event change that is called at the time we select the check "Yes". And we created the same event for the check "Not", that in the case of selected, automatically disable the button.

Follow the code (I added the "Send" button to test):

<label>Sim</label>
<input type="radio" id="sim" name="liberaBotao" ng-model="sim" required>

<label>Não</label>
<input type="radio" id="nao" name="liberaBotao" ng-model="nao" required> 

<button type="submit" id="botao-enviar" disabled> Enviar </button>

Script:

const checkSim = document.querySelector("#sim");
const checkNao = document.querySelector("#nao");
var botaoEnviar = document.getElementById("botao-enviar");

checkSim.addEventListener("change", (el) => {   
    if (checkSim.checked) {
            botaoEnviar.disabled = false;
    } 
});
checkNao.addEventListener("change", (el) => {   
    if (checkNao.checked) {
            botaoEnviar.disabled = true;
    }
});

I hope it helps.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.