Question 245151 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – If statement checking two inputs, a checkbox is checked and the value of an input in max length

I have two inputs in the html and in JavaScript, I am trying to write a function that does a check for both inputs to show the button. The user needs to enter 7 text and check the box for the button to appear.

$(document).on("input", "#activationCode", function(e) {
  e.preventDefault();
  //Only enable button if the activation code is 7 characters
  let checkbox = document.getElementById("checkbox");
  if ($(this).val().length == 7 && checkbox.checked) {
    $('.kit-activation-button').attr('disabled', false);
  } else {
    $('.kit-activation-button').attr('disabled', true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="activationCode" name="code" class="form-control required" required aria-required="true" maxlength="7">

<input type="checkbox" id="checkbox" />

<button type="submit" class=" btn btn-primary" id="Button" disabled>submit</button>

I tried this but I still cant get the disable attribute to disappear when you enter 7 characters and check the box.

Tags:

2

Answers


  1. 0

    id="checkbox" should be id="activation-pwn-check", and id="Button" should be id="kit-activation-button".

    Move the code that enables the submit button into its own function. Then you can call it from event handlers for both the text input and checkbox.

    function enableDisableSubmit() {
  let checkbox = $("#activation-pwn-check");
  let textfield = $("#activationCode");
  $('#kit-activation-button').attr('disabled', !(checkbox.prop('checked') && textfield.val().length == 7));
}

$(document).on("input", "#activationCode", enableDisableSubmit);

$(document).on("change", "#activation-pwn-check", enableDisableSubmit);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="activationCode" name="code" class="form-control required" required aria-required="true" maxlength="7">

<input type="checkbox" id="activation-pwn-check" />

<button type="submit" class=" btn btn-primary" id="kit-activation-button" disabled>submit</button>
    Login or Signup to reply.
  2. 0

    You are not naming your class .kit-activation-button on your element, so you’re not calling anything. Also you are not checking the state of your checkbox on activation (checked unchecked)

    You can simplify this by making a function for the redundant code, but I felt long hand was a better explanation to show where the short-comings were.

    $(document).on("input", "#activationCode", function(e) {
  e.preventDefault();
  if ($(this).val().length == 7 && $("#checkbox").is(":checked")) {
    $('.kit-activation-button').attr('disabled', false);
  } else {
    $('.kit-activation-button').attr('disabled', true);
  }
});

$(document).on('click', "#checkbox", function() {
  if ($("#activationCode").val().length == 7 && $("#checkbox").is(":checked")) {
    $('.kit-activation-button').attr('disabled', false);
  } else {
    $('.kit-activation-button').attr('disabled', true);
  }
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="activationCode" name="code" class="form-control required" required aria-required="true" maxlength="7">

<input type="checkbox" id="checkbox" />

<button type="submit" class="kit-activation-button btn btn-primary" id="Button" disabled>submit</button>

    A simplified version would be:

    $(document).on("input", "#activationCode", function() {
  checkInput();
}).on('click', "#checkbox", function() {
  checkInput();
});


function checkInput(){
  $('.kit-activation-button').attr('disabled', 
  ($("#activationCode").val().length == 7 
     && $("#checkbox").is(":checked")) ? false : true);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search