启用/禁用“选择”,如果文本输入是否为空
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','');
}
});
});
相关文章:
- 尝试在PHP中回显输入文本时出现未定义的索引错误
- 使用模拟按键在输入框中自动输入文本
- 如何添加类,同时开始在文本字段中输入文本
- JQuery使用相同的功能自动完成各种输入文本
- 如何设置输入文本框jquery的值
- 输入文本框为空时的阻止按钮asp.网络表单
- 基于单选框更新页眉,选中并选择输入文本
- 将输入文本与某个选项的值相匹配并自动选择
- 如何在 JavaScript 中创建输入文本框
- 如何使用纯Javascript观看输入文本框
- 需要使用javascript获取输入文本,然后将其添加到句子中
- php&js-将电子邮件添加到输入文本中
- 动态启用/禁用来自控制器的输入文本
- .val()不返回输入文本
- 从确认框中预填充输入文本框
- 如何使用JavaScript解析输入文本中给定的数据
- 添加/删除/更改输入文本的部分值
- 根据输入文本按元素排序,AngularJS
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- 如何从Tr重复的输入文本中获取值