How to prevent a function from being executed when a condition is reached and reactivate it when necessary?

Question

I’m in a skirmish here to try to stop a function when a certain condition is reached and rehabilitate it if a certain button is clicked.

In my case, I have a text and buttons that change the font size (in addition to the buttons I’m also using cookies and keyboard shortcuts, but that’s another story). My difficulty is blocking the button to increase the font, if it is 25px; and blocking the decrease, if the font is 13px. It is possible?

Detail: I have already used the methods show and hide for these buttons and until it works, however I could not leave these values hidden in a cookie. I also used the prevent.default, but unsuccessfully.

In addition to the code inserted below, I also have the same Codepen.

$(".dec-font").click($.diminuiFonte = function() {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;
  $("#body-post").animate({
    'font-size': size + 'px'
  });
  console.log(size);
  return (false);
});

$(".inc-font").click($.aumentaFonte = function() {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;
  $("#body-post").animate({
    'font-size': size + 'px'
  });
  console.log(size);
  return (false);
});

$(".res-font").click($.resetaFonte = function() {
  var size = '16';
  size = size.replace('px', '');
  size = parseInt(size);
  $("#body-post").animate({
    'font-size': size + 'px'
  });
  console.log(size);
  return (false);
});

.acess li {
  display: inline-block;
  margin-right: -4px!important;
  border: 1px solid #bbb;
  cursor: pointer
}

.acess li a {
  font-size: 10px;
  padding: 6px;
  display: block;
  font-family: Open Sans;
  text-transform: uppercase
}

#body-post {
  font-size: 16px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='acess'>
  <ul>
    <li class='dec-font'><a>A-</a></li>
    <li class='res-font'><a>Tamanho Normal</a></li>
    <li class='inc-font'><a>A+</a></li>
  </ul>
</div>

<div id='body-post'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra nulla quis velit pretium, in lacinia enim rutrum. Proin molestie magna in ullamcorper pulvinar. Sed ac finibus metus. Quisque placerat posuere elit. Cras tempus faucibus est, at
  aliquam nisi pulvinar non. Vestibulum nunc lacus, mattis ac molestie quis, facilisis a elit. Cras auctor maximus urna eget ultricies. Nunc rhoncus imperdiet dui, in fringilla purus fringilla venenatis. Cras commodo, odio ut accumsan eleifend, nulla
  dolor vestibulum lacus, elementum posuere eros dolor non dui. Nulla sed ligula eleifend, blandit mi eget, iaculis nisl. In ut augue sed arcu tincidunt auctor ac quis lectus. Fusce ac purus turpis. Duis ultrices purus non massa ultricies, id sagittis
  sapien tempor. Nam erat libero, accumsan et commodo et, vulputate nec metus. Duis pretium tortor sed condimentum facilisis. Aliquam non elit ac lectus luctus rhoncus vitae a arcu. Vestibulum vulputate rutrum maximus. Donec arcu quam, ultricies finibus
  arcu nec, dapibus semper neque. Etiam bibendum sem non tristique cursus. Duis sed porta quam. Nam faucibus placerat mattis. Sed interdum sapien ex, non elementum augue scelerisque non. Quisque porta mi at eros suscipit varius. Proin et efficitur ante,
  ac faucibus diam. Cras vehicula sagittis metus, in suscipit lacus dapibus posuere. Morbi odio felis, dapibus in urna vitae, pretium sodales dui. Cras ornare risus et dolor feugiat pellentesque. Donec volutpat, eros non feugiat tempus, ex leo vulputate
  velit, a aliquet felis nunc sed turpis. Pellentesque et velit vel massa sodales tincidunt. Proin suscipit mauris arcu, sed euismod sapien pharetra in. Nam eget hendrerit ex.
</div>

Answer 1

If you do not want the function to run completely, just check the variable value size according to its rules of maximum and minimum size:

$(".dec-font").click($.diminuiFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;

  if (size >= 13) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

$(".inc-font").click($.aumentaFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;

  if (size <= 25) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

Note that now the animation in letter size is conditional and will not always be executed.

With this, your complete code would look more or less like this:

$(".dec-font").click($.diminuiFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;

  if (size >= 13) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

$(".inc-font").click($.aumentaFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;

  if (size <= 25) {
    $("#body-post").animate({'font-size' : size + 'px'});
  }
});

$(".res-font").click($.resetaFonte = function () {
  var size = '16'; size = size.replace('px', '');
  size = parseInt(size);
  $("#body-post").animate({'font-size' : size + 'px'});
});

.acess li {
  display:inline-block;
  margin-right:-4px!important;
  border:1px solid #bbb; cursor:pointer
}

.acess li a {
  font-size:10px; padding:6px;
  display:block; font-family:Open Sans;
  text-transform:uppercase
}

#body-post {
  font-size:16px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='acess'>
  <ul>
    <li class='dec-font'><a>A-</a></li>
    <li class='res-font'><a>Tamanho Normal</a></li>
    <li class='inc-font'><a>A+</a></li>
  </ul>
</div>

<div id='body-post'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra nulla quis velit pretium, in lacinia enim rutrum. Proin molestie magna in ullamcorper pulvinar. Sed ac finibus metus. Quisque placerat posuere elit. Cras tempus faucibus est, at aliquam nisi pulvinar non. Vestibulum nunc lacus, mattis ac molestie quis, facilisis a elit. Cras auctor maximus urna eget ultricies. Nunc rhoncus imperdiet dui, in fringilla purus fringilla venenatis. Cras commodo, odio ut accumsan eleifend, nulla dolor vestibulum lacus, elementum posuere eros dolor non dui. Nulla sed ligula eleifend, blandit mi eget, iaculis nisl. In ut augue sed arcu tincidunt auctor ac quis lectus. Fusce ac purus turpis. Duis ultrices purus non massa ultricies, id sagittis sapien tempor. Nam erat libero, accumsan et commodo et, vulputate nec metus. Duis pretium tortor sed condimentum facilisis.

Aliquam non elit ac lectus luctus rhoncus vitae a arcu. Vestibulum vulputate rutrum maximus. Donec arcu quam, ultricies finibus arcu nec, dapibus semper neque. Etiam bibendum sem non tristique cursus. Duis sed porta quam. Nam faucibus placerat mattis. Sed interdum sapien ex, non elementum augue scelerisque non. Quisque porta mi at eros suscipit varius. Proin et efficitur ante, ac faucibus diam. Cras vehicula sagittis metus, in suscipit lacus dapibus posuere. Morbi odio felis, dapibus in urna vitae, pretium sodales dui. Cras ornare risus et dolor feugiat pellentesque. Donec volutpat, eros non feugiat tempus, ex leo vulputate velit, a aliquet felis nunc sed turpis. Pellentesque et velit vel massa sodales tincidunt. Proin suscipit mauris arcu, sed euismod sapien pharetra in. Nam eget hendrerit ex.
</div>

---

Another option is to create a class css which deactivates its li, for example:

.disabled {
  pointer-events: none;
  opacity:0.4;
}

So whenever one of the options is clicked, you check the size and add or remove this class using addClass or removeClass jquery:

To deactivate, it would be like this:

$(".dec-font").removeClass("disabled");

To activate, it would be this way:

$(".dec-font").addClass("disabled");

The complete code would look like this:

$(".dec-font").click($.diminuiFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) - 3.0;
  $("#body-post").animate({'font-size' : size + 'px'});
  bloqueiaBotoes(size);
});

$(".inc-font").click($.aumentaFonte = function () {
  var size = $("#body-post").css('font-size');
  size = size.replace('px', '');
  size = parseInt(size) + 3.0;
  $("#body-post").animate({'font-size' : size + 'px'});
  bloqueiaBotoes(size);
});

$(".res-font").click($.resetaFonte = function () {
  var size = '16'; size = size.replace('px', ''); size = parseInt(size); $("#body-post").animate({'font-size' : size + 'px'});
  allEnabled();
});

function bloqueiaBotoes(size) {
  if (size <= 13) {
    $(".dec-font").addClass("disabled");
    $(".inc-font").removeClass("disabled");
  } else if (size >= 25) {
    $(".inc-font").addClass("disabled");
    $(".dec-font").removeClass("disabled");
  } else {
    allEnabled();
  }
}

function allEnabled() {
  $(".dec-font").removeClass("disabled");
  $(".inc-font").removeClass("disabled");
}

.acess li {
  display:inline-block;
  margin-right:-4px!important;
  border:1px solid #bbb; cursor:pointer
}

.acess li a {
  font-size:10px; padding:6px;
  display:block; font-family:Open Sans;
  text-transform:uppercase
}

#body-post {
  font-size:16px
}

.disabled {
  pointer-events: none;
  opacity:0.4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='acess'>
  <ul>
    <li class='dec-font'><a>A-</a></li>
    <li class='res-font'><a>Tamanho Normal</a></li>
    <li class='inc-font'><a>A+</a></li>
  </ul>
</div>

<div id='body-post'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra nulla quis velit pretium, in lacinia enim rutrum. Proin molestie magna in ullamcorper pulvinar. Sed ac finibus metus. Quisque placerat posuere elit. Cras tempus faucibus est, at aliquam nisi pulvinar non. Vestibulum nunc lacus, mattis ac molestie quis, facilisis a elit. Cras auctor maximus urna eget ultricies. Nunc rhoncus imperdiet dui, in fringilla purus fringilla venenatis. Cras commodo, odio ut accumsan eleifend, nulla dolor vestibulum lacus, elementum posuere eros dolor non dui. Nulla sed ligula eleifend, blandit mi eget, iaculis nisl. In ut augue sed arcu tincidunt auctor ac quis lectus. Fusce ac purus turpis. Duis ultrices purus non massa ultricies, id sagittis sapien tempor. Nam erat libero, accumsan et commodo et, vulputate nec metus. Duis pretium tortor sed condimentum facilisis.

Aliquam non elit ac lectus luctus rhoncus vitae a arcu. Vestibulum vulputate rutrum maximus. Donec arcu quam, ultricies finibus arcu nec, dapibus semper neque. Etiam bibendum sem non tristique cursus. Duis sed porta quam. Nam faucibus placerat mattis. Sed interdum sapien ex, non elementum augue scelerisque non. Quisque porta mi at eros suscipit varius. Proin et efficitur ante, ac faucibus diam. Cras vehicula sagittis metus, in suscipit lacus dapibus posuere. Morbi odio felis, dapibus in urna vitae, pretium sodales dui. Cras ornare risus et dolor feugiat pellentesque. Donec volutpat, eros non feugiat tempus, ex leo vulputate velit, a aliquet felis nunc sed turpis. Pellentesque et velit vel massa sodales tincidunt. Proin suscipit mauris arcu, sed euismod sapien pharetra in. Nam eget hendrerit ex.
</div>

Answer 2

Keeping the same structure you are using just do so:

$(".inc-font").click($.aumentaFonte = function () {

  var size = $("#body-post").css('font-size').replace('px',''); 

   //aqui você verifica se o tamanho é menor que os 25, faz o incremento caso 
   //seja não há a necessidade de colocar um else, pois se o valor for maior 
   //não irá incrementar

   if(size < 25){
    size = parseInt(size) + 3.0;

    //então basta colocar na div
      $("#body-post").animate({'font-size' : size + 'px'});
   } 
  return (false);
 });

for the function that decreases the source just use the same logic.