如果文本输入为空，则启用/禁用“选择”

Question

I am trying to disable a <select> depending on if text input is empty or not.

What I need is on page load is for the select to be enabled because the text inputs are empty, but once a date is entered to disable the select.

This is what I've got so far:

<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>

And the 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

It will work better the way you want it with keyup:

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

Oh, and if you want the select element disabled or not when you load the page, depending on whether the input's are populated or not, you can check that with your 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>