javascript - 如果文本输入为空或非则启用/禁用 “select”

Question

我正在尝试禁用 <select>取决于文本输入是否为空。

我需要的是在页面加载时启用选择，因为文本输入为空，但一旦输入日期即可禁用选择。

这是我到目前为止所得到的:

<ul>
    <li><label for="from_date">From Date:</label> <input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
    <li><label for="to_date">To Date:</label> <input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
    <li><label for="older_than">Or Older Than:</label> 
        <select name="older_than" id="older_than" class="input_tbl">
        <option value="">Please Select</option>
        <option value="1">1 Month</option>
        <option value="2">2 Month</option>
        <option value="3">3 Month</option>
        <option value="4">4 Month</option>
        <option value="5">5 Month</option>
        <option value="6">6 Month</option>
    </select>
    </li>
    <li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>

和 JavaScript:

$(document).ready(function() {  
    $(".item_form_date").change(function(e) {
        if($(this).val() == '') {
            $("#older_than").removeAttr('disabled');
        } else {
            $("#older_than").attr('disabled','disabled');
        }
    });
});

Answer 1

使用keyup，它会按照您想要的方式更好地工作:

$(document).ready(function() {  
    $(".item_form_date").on("keyup change", function() {
        var checker = $.trim($(this).val()).length === 0;
        $("#older_than").attr('disabled', !checker);
    });
});

哦，如果您希望在加载页面时select元素禁用，取决于输入的是否已填充或不，你可以用你的 PHP 检查一下:

<ul>
    <li>
        <label for="from_date">From Date:</label>
        <input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" autocomplete="off" />
    </li>
    <li>
        <label for="to_date">To Date:</label> 
        <input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" autocomplete="off" />
    </li>
    <li>
        <label for="older_than">Or Older Than:</label>

        <!-- this code -->
        <?php $disable = (trim($_POST['from_date']) == "" && trim($_POST['to_date']) == "") ? "" : " disabled"; ?>

        <select name="older_than" id="older_than" class="input_tbl"<?php echo $disable; ?>><!-- end of new feauture -->
            <option value="">Please Select</option>
            <option value="1">1 Month</option>
            <option value="2">2 Month</option>
            <option value="3">3 Month</option>
            <option value="4">4 Month</option>
            <option value="5">5 Month</option>
            <option value="6">6 Month</option>
        </select>
    </li>
    <li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>