условия игнорируются в событии изменения jQuery?

Question

Поэтому я пытаюсь включить / отключить кнопку в зависимости от ввода, и по какой-то причине я не знаю почему, она не будет выполняться так, как я хочу.

• Если значение входное значение равно или находится в диапазоне 1-10: кнопка включения.
• Если значение входа меньше 1: кнопка отключения.

В момент изменения значения входа независимо от значения кнопка всегда включается. Если значение установлено в 0, оно не отключается. Переменная inputIn используется для ввода, а переменная inputBtn для кнопки, поэтому вы знаете, где искать.

И если есть что-то еще, что вы заметили, мне нужно исправить, пожалуйста, сообщите мне, так как я новичок до jQuery и Javascript.

ОБНОВЛЕНИЕ:

Проблема решена путем замены всех операторов на операторы if в событии изменения. Но не оптимально?

$(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));
});

Answer 1

Найдены две ошибки в вашем коде

1. идентификатор html сущностей должен быть уникальным. Вы подтверждаете тот же идентификатор, чтобы разделить кнопку заказа.
2. В случае изменения ваше условие должно прочитать это qty >= 1 && qty <= 10, потому что ваше значение должно быть между 1 и 10.