如果数量超过限制，则禁用单选按钮

Question

我想在输入数字 (id=quantity) 超过单选值时禁用单选按钮，并在数量低于单选值时启用单选按钮。这是（失败的）尝试完成这项工作。到目前为止，在我看来，"quantity" 仅在使用 add/subtract 按钮时使用，因此数量总是错误的。我也尝试过使用 "onchange" 但它没有用。

function radio_disabler() {
  var qnt = document.getElementById("quantity").value;
  if (qnt >= 3) {
    document.getElementById("3t").disabled = true;
  }
  if (qnt <= 3) {
    document.getElementById("3t").disabled = false;
  }
  if (qnt === 3) {
    document.getElementById("3t").disabled = false;
  }
}

<div class="input-group col-md-4 col-sm-10">
  <span class="input-group-btn">
                <button type="button btn-warning" class="quantity-left-minus"  data-type="minus" data-field="" onclick="radio_disabler()">
                  <span class="glyphicon glyphicon-minus">-</span></button>
  </span>
  <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
  <span class="input-group-btn">
              <button type="button btn-warning" class="quantity-right-plus" data-type="plus" data-field="" onclick="radio_disabler()">
    <span class="glyphicon glyphicon-plus">+</span>
  </button>
  </span>
</div>


<div id="trucks">

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="3t" name="truck" value="3">
  <label for="3t">- 3 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="5t" name="truck" value="5">
  <label for="5t">- 5 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="10t" name="truck" value="10">
  <label for="10t">- 10 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="15t" name="truck" value="15">
  <label for="15t">- 15 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="20t" name="truck" value="20">
  <label for="20t">- 20 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="30t" name="truck" value="30">
  <label for="30t">- 30 tons</label><br>
</div>

编辑：

我忘了包含按钮 js

$(文档).ready(函数(){

变量数量=1； $('.quantity-right-plus').click(函数(e){

    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val());

    // If is not undefined

        $('#quantity').val(quantity + 1);


        // Increment

});

 $('.quantity-left-minus').click(function(e){
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val());

    // If is not undefined

        // Increment
        if(quantity>0){
        $('#quantity').val(quantity - 1);
        }
});

});

Answer 1

function radio_disabler() {
  var qnt = document.getElementById("quantity").value;
  console.log(qnt)
  if (qnt > 3) {
    document.getElementById("3t").disabled = true;
  }
  if (qnt < 3) {
    document.getElementById("3t").disabled = false;
  }
  if (qnt === 3) {
    document.getElementById("3t").disabled = false;
  }
}

<div class="input-group col-md-4 col-sm-10">
  <span class="input-group-btn">
            <button type="button btn-warning" class="quantity-left-minus"  data-type="minus" data-field="" onclick="radio_disabler()">
              <span class="glyphicon glyphicon-minus">-</span></button>
  </span>
  <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
  <span class="input-group-btn">
          <button type="button btn-warning" class="quantity-right-plus" data-type="plus" data-field="" onclick="radio_disabler()">
<span class="glyphicon glyphicon-plus">+</span>
  </button>
  </span>
</div>


<div id="trucks">

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="3t" name="truck" value="3">
  <label for="3t">- 3 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="5t" name="truck" value="5">
  <label for="5t">- 5 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="10t" name="truck" value="10">
  <label for="10t">- 10 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="15t" name="truck" value="15">
  <label for="15t">- 15 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="20t" name="truck" value="20">
  <label for="20t">- 20 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="30t" name="truck" value="30">
  <label for="30t">- 30 tons</label><br>
</div>

Answer 2

JavaScript:

function decrease() {
    document.getElementById("quantity").value = parseInt( document.getElementById("quantity").value ) - 1
    radio_disabler()
}

function encrease() {
    document.getElementById("quantity").value = parseInt( document.getElementById("quantity").value ) + 1
    radio_disabler()
}

function radio_disabler() {
    var qnt = document.getElementById("quantity").value;
    if ( qnt > 3 ) {
        document.getElementById("3t").disabled = true;
    }
    if ( qnt < 3 ) {
        document.getElementById("3t").disabled = false;
    }
    if ( qnt == 3 ) {
        document.getElementById("3t").disabled = false;
    }
}

HTML:

<div class="input-group col-md-4 col-sm-10">
    <span class="input-group-btn">
        <button type="button btn-warning" class="quantity-left-minus"  data-type="minus" data-field="" onclick="decrease()">
        <span class="glyphicon glyphicon-minus">-</span></button>
    </span>
    <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
    <span class="input-group-btn">
        <button type="button btn-warning" class="quantity-right-plus" data-type="plus" data-field="" onclick="encrease()">
            <span class="glyphicon glyphicon-plus">+</span>
        </button>
    </span>
</div>

<div id="trucks">
    <img src="assets/img/truck.png" alt="" width="100px">
    <input type="radio" id="3t" name="truck" value="3">
    <label for="3t">- 3 tons</label><br>

    <img src="assets/img/truck.png" alt="" width="100px">
    <input type="radio" id="5t" name="truck" value="5">
    <label for="5t">- 5 tons</label><br>

    <img src="assets/img/truck.png" alt="" width="100px">
    <input type="radio" id="10t" name="truck" value="10">
    <label for="10t">- 10 tons</label><br>

    <img src="assets/img/truck.png" alt="" width="100px">
    <input type="radio" id="15t" name="truck" value="15">
    <label for="15t">- 15 tons</label><br>

    <img src="assets/img/truck.png" alt="" width="100px">
    <input type="radio" id="20t" name="truck" value="20">
    <label for="20t">- 20 tons</label><br>

    <img src="assets/img/truck.png" alt="" width="100px">
    <input type="radio" id="30t" name="truck" value="30">
    <label for="30t">- 30 tons</label><br>
</div>

Answer 3

function radio_disabler() {
  var qnt = document.getElementById("quantity").value;
  if (qnt >= 3) {
    document.getElementById("3t").disabled = true;
  }
  if (qnt <= 3) {
    document.getElementById("3t").disabled = false;
  }
  if (qnt === 3) {
    document.getElementById("3t").disabled = false;
  }
}

<div class="input-group col-md-4 col-sm-10">
  <span class="input-group-btn">
                <button type="button btn-warning" class="quantity-left-minus"  data-type="minus" data-field="" onclick="radio_disabler()">
                  <span class="glyphicon glyphicon-minus">-</span></button>
  </span>
  <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100" onkeyup='radio_disabler()'>
  <span class="input-group-btn">
              <button type="button btn-warning" class="quantity-right-plus" data-type="plus" data-field="" onclick="radio_disabler()">
    <span class="glyphicon glyphicon-plus">+</span>
  </button>
  </span>
</div>


<div id="trucks">

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="3t" name="truck" value="3">
  <label for="3t">- 3 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="5t" name="truck" value="5">
  <label for="5t">- 5 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="10t" name="truck" value="10">
  <label for="10t">- 10 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="15t" name="truck" value="15">
  <label for="15t">- 15 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="20t" name="truck" value="20">
  <label for="20t">- 20 tons</label><br>

  <img src="assets/img/truck.png" alt="" width="100px">
  <input type="radio" id="30t" name="truck" value="30">
  <label for="30t">- 30 tons</label><br>
</div>

如果数量超过限制，则禁用单选按钮

Disable radio button if quantity exceeds limit

html

javascript

radio-button