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

Posted 2023-04-13

【中文标题】在填充文本框之前禁用选择框

【英文标题】：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)
            
        );

欢迎任何建议。

【参考方案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);
  );
);