conditions ignored in change event jQuery?

bob :

So I'm trying to enable/disable a button depending on the input and for some reason I don't know why, it wont execute the way I want it to.

• If value of the input is equals or between 1-10: Enable button.
• If value of the input is less than 1: Disable button.

At the moment when changing the input value, regardless of the value the button always get enabled. If value is set to 0 it doesn't get disabled. The variable inputIn holds for input and the variable inputBtn for the button, so you know where to look.

And if there is anything else you notice I need to fix, please tell me since im new to jQuery and Javascript.

UPDATE:

Issue solved by changing all statements to if-statements in the change event. But not optimal?

$(document).ready(function() {
let $table = $(".shoe-table");

fetch("shoes.json")
.then(resp => resp.json())
.then(data => {
  let shoes = data.shoes;
  let rows = [1, 2, 3];
  let shoeCard = "";

  let counter = 0;
  rows.forEach(row => {
    shoeCard += "<tr>";
    for (let index = 0; index < 4; index++) {
      shoeCard +=
        "<td class='card text-center'>" +
        "<img class='card-img-top' src=" +
        shoes[counter].image +
        " alt='Card image cap'>" +
        "<h5 class='card-title'>" +
        shoes[counter].name +
        "</h5>" +
        "<p class='card-text'>kr " +
        shoes[counter].price +
        "</p>" +
        "<button id=" +
        counter +
        " class='orderNow btn btn-outline-dark'>ORDER NOW</button>" +
        "<div id=" + counter + " class='input-form'><input class='qty-chooser' type='number' placeholder='Choose quantity' min=0 max=10>" +
        "<button class='btn-add-to-cart' disabled='disabled'>ADD TO CART</button>" +
        "</div>" +
        "</td>";
      counter++;
    }

    shoeCard += "</tr>";
  });

  $table.append(shoeCard);
  let $inputForm = $(".input-form");
  let $orderBtn = $(".orderNow");

  $inputForm.hide();

  $orderBtn.click(toggleOrder);

  function toggleOrder() {
    let clickedBtn = $(this);
    let thisInputForm = $("#" + clickedBtn.attr("id") + ".input-form");


    let inputBtn = thisInputForm.children("button");
    let inputIn = thisInputForm.children("input");

    function resetInputForm() {
      inputBtn.css("background", "");
      inputBtn.css("color", "");
      inputBtn.attr("disabled", "disabled");
      inputIn.val(null);
    }

    inputBtn.click(function() {
      console.log("ADDING");
      thisInputForm.hide("slow");
      clickedBtn.text("ORDER NOW");
      clickedBtn.css("background", "");
      resetInputForm();
    });
     // The change function with conditions that do not work
    inputIn.change(function() {
      console.log("change");
      let qty = inputIn.val();
      if (qty >= 1 || qty <= 10) {
        inputBtn.removeAttr("disabled");
        inputBtn.css("background", "rgb(15, 163, 10)");
        inputBtn.css("color", "white");
      } else if (qty < 1) {
        resetInputForm();
      }
    });

    if (clickedBtn.text() == "CANCEL") {
      thisInputForm.hide("slow");
      clickedBtn.text("ORDER NOW");
      clickedBtn.css("background", "");
      resetInputForm();
    } else {
      thisInputForm.show("slow");
      clickedBtn.text("CANCEL");
      clickedBtn.css("background", "red");
      inputBtn.attr("disabled", "disabled");
      resetInputForm();
    }
  }
})
.catch(err => console.error(err));
});

Rakesh Shukla :

Found two mistakes in your code

1. id of html entities should be unique. You are proving same id to Div an ordernow button.
2. In change event your condition should read this qty >= 1 && qty <= 10 cause your value should be between 1 and 10.