Jquery - validate textbox based on checkbox

I want to validate a value only when a checkbox is checked. I am able to get the validation running but if the checkbox is unchecked, the validation still runs.

Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$("#personal_deliver_same").on("click", function(){
  var check = $("#personal_deliver_same").is(':checked');
  if(check){
    $("#input-payment-postcode").keyup(function (){ 
      if($("#input-payment-postcode").val().length > 5) {
        alert("in2");
      }
    });		
  }
  else{
    alert("out2");
  }
});		

<!-- language: lang-html -->

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

<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>

<!-- end snippet -->

I think this will be what you want.

• It will store the value of the checkbox in a variable
• it will monitor the checkbox's input event instead of just click. Now when the value changes the event will occur
• It will monitor the input event of the text box for changes. If a change happens and the box is checked it will show you the output
• When the box is checked, it will also fire the event on the textbox

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const $checkbox = $("#personal_deliver_same");
const $txtPostCode = $("#input-payment-postcode");
let isChecked = $checkbox.is(":checked");

$checkbox.on("input", function(){
  isChecked = $checkbox.is(":checked");
  console.log("Checkbox changed:", isChecked);
  
  if(isChecked){
    $txtPostCode.trigger('input');
  }
});

$txtPostCode.on('input', function (){ 
  if(isChecked) {
    if($txtPostCode.val().length > 5){
      console.log("post code length is more than 5");
    } else {
      console.log("post code length is 5 or less");
    }
  }
});

<!-- language: lang-html -->

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

<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label for="personal_deliver_same">My Checkbox</label>

<!-- end snippet -->

You're binding your event handlers in the wrong sequence and not checking it when you need to. Try this way:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var check = false;

$("#personal_deliver_same").on("click", function() {
  check = $("#personal_deliver_same").is(':checked');
});


$("#input-payment-postcode").keyup(function() {
  if (check && $("#input-payment-postcode").val().length > 5) {
    console.log("in2");
  }
});

<!-- language: lang-html -->

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

<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>

<!-- end snippet -->

<label for="postcode">Post Code</label>
<input id="postcode" />

<input id="validate" type="checkbox">
<label for="validate">Validate Post Code?</label>

<script>
  $('#validate').on('click',() => shouldValidate() )
  $('#postcode').on('keyup',() => shouldValidate() )

  function shouldValidate(){
    if( $('#validate').is(':checked') )
      // Validate
    else
      // Don't Validate
  }
</script>