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元素disabled，取决于是否填充了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>

Answer 2

如果您希望在用户输入时更新，则需要使用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','');
        }
    });
});

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

2 个答案: