在填充文本框之前禁用选择框答案

【问题标题】：Disable a select box until a textbox is filled在填充文本框之前禁用选择框
【发布时间】：2021-08-28 06:43:15
【问题描述】：

我有一个文本框和一个选择框：

<div class="form-group col-xs-12 col-sm-3">
        <div class="input-group " >
            <span class="input-group-addon white" >Weight</span>
            <input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-3">
        <div class="input-group ">
            <span class="input-group-addon white">Barrel Size</span>
            <select class="form-control gray" id="sizeSelect" title="Select an option">
                <option value="Small">Small</option>
                <option value="Medium">Medium</option>
                <option value="Large">Large</option>
            </select>
        </div>
    </div>

选择尺寸后，它会从重量中减去一定数量。所以我想确保用户在输入重量之前不要选择尺码。

我的问题是如何在输入权重（数字）之前禁用选择框？像这样？

        $(".weight").change(function () {
            if (this.value <= 0 || this.value == null) {
                $("#sizeSelect").prop("disabled", true)
            }
            else {
                $("#sizeSelect").prop("disabled", false)
            }
        });

欢迎任何建议。

【问题讨论】：

标签： javascript c# jquery ajax

【解决方案1】：

这应该工作

//makes select disabled on load
$('#sizeSelect').attr('disabled', true);

//this function runs on input 
$('#weight').on('input', function() {
  let val = this.value;
  
  if (val.length > 0) {
    $('#sizeSelect').attr('disabled', false);
  } else {
    $('#sizeSelect').attr('disabled', true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
  <div class="input-group ">
    <span class="input-group-addon white">Weight</span>
    <input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
  </div>
</div>

<div class="form-group col-xs-12 col-sm-3">
  <div class="input-group ">
    <span class="input-group-addon white">Barrel Size</span>
    <select class="form-control gray" id="sizeSelect" title="Select an option">
      <option value="Small">Small</option>
      <option value="Medium">Medium</option>
      <option value="Large">Large</option>
    </select>
  </div>
</div>

【讨论】：

【解决方案2】：

是的。你禁用的想法是正确的。但是，那些禁用属性更改仅在文本输入中进行更改时才会起作用。要使选择输入默认禁用，您必须在 document.ready() 上添加 disabled 属性，或者说，在文本输入的 .change() 之外。

jQuery(document).ready(function($){
$("#sizeSelect").prop("disabled", true);

$(".weight").change(function () {
            if (this.value <= 0 || this.value == null) {
                $("#sizeSelect").prop("disabled", true);
            }
            else {
                $("#sizeSelect").prop("disabled", false);
            }
        });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
        <div class="input-group " >
            <span class="input-group-addon white" >Weight</span>
            <input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-3">
        <div class="input-group ">
            <span class="input-group-addon white">Barrel Size</span>
            <select class="form-control gray" id="sizeSelect" title="Select an option">
                <option value="Small">Small</option>
                <option value="Medium">Medium</option>
                <option value="Large">Large</option>
            </select>
        </div>
    </div>

【讨论】：

使用 JS 加载文档时无需禁用 select 元素。您可以改用disabled HTML 属性

【解决方案3】：

你可以使用keyup

$(document).ready(function(){
$("#sizeSelect").prop("disabled", true)
    $(".weight").on("keyup", function() {
    var length = $.trim($(this).val()).length === 0;
    $("#sizeSelect").prop('disabled', length);
  });
});

【讨论】：