启用/禁用“选择”，如果文本输入是否为空 - Enabling/ disabling “select” if text input is empty or not

Enabling/ disabling “select” if text input is empty or not

我正在尝试禁用<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');
        }
    });
});

它会

以您想要的方式更好地工作keyup：

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

哦，如果你想在加载页面时disabled select元素，这取决于input's是否填充，你可以用你的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>

如果希望它随着用户类型而更新，则需要使用 input 事件。

http://jsfiddle.net/rfujjge6/1/

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