javascript-启用禁用按钮的jquery函数

任何人都可以帮我解决我的代码…我想做的是,如果输入文本框不为空,但是在我当前的代码中,则无法启用禁用按钮.

我有一个选择框,如果我从中选择,则文本框将自动填充,但是如果我选择为空,则文本框将为空.

我的问题是我的启用禁用按钮的脚本不起作用.

在我的浏览器中输出：
http://s38.photobucket.com/user/eloginko/media/hey_zps31f4cd60.png.html

html代码：

<form method="post" action="index.php">
Caraga Region: <select name="region" id="region" onChange="here()"></select>
Municipalities: <select name="town" id="town" onChange="here()"></select>
Unique ID: <select name="uniq_id" id="uniq_id" onChange="here()"></select>
Position: <select name="position" id="position" onChange="here()"></select> <br />
Salary Grade: <select name="salary_grade" id="salary_grade" onChange="here()"></select>
Salary: <select name="salary" id="salary" onChange="here()"></select> <br />
<br />
<br />
Transfer Selected Text to textbox:<br />
<input id="t_region" name="t_region" type="text" ><br />
<input id="t_town" name="t_town" type="text" ><br />
<input id="t_uniq_id" name="t_uniq_id" type="text" ><br />
<input id="t_position" name="t_position" type="text" ><br />
<input id="t_salary_grade" name="t_salary_grade" type="text" ><br />
<input id="t_salary" name="t_salary" type="text" ><br /><br />

List of Applicants:<br />
<input readonly type="text" class="number" name="aic1" id="aic1" /><input class="number" placeholder=" 1.)" name="name1" type="text" required id="name1" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic2" id="aic2" /><input class="number" placeholder=" 2.)" name="name1" type="text" required id="name2" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic3" id="aic3" /><input class="number" placeholder=" 3.)" name="name1" type="text" required id="name3" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic4" id="aic4" /><input class="number" placeholder=" 4.)" name="name1" type="text" required id="name4" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic5" id="aic5" /><input class="number" placeholder=" 5.)" name="name1" type="text" required id="name5" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic6" id="aic6" /><input class="number" placeholder=" 6.)" name="name1" type="text" required id="name6" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic7" id="aic7" /><input class="number" placeholder=" 7.)" name="name1" type="text" required id="name7" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic8" id="aic8" /><input class="number" placeholder=" 8.)" name="name1" type="text" required id="name8" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic9" id="aic9" /><input class="number" placeholder=" 9.)" name="name1" type="text" required id="name9" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic10" id="aic10" /><input class="number" placeholder="10.)" name="name1" type="text" required id="name10" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic11" id="aic11" /><input class="number" placeholder="11.)" name="name1" type="text" required id="name11" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic12" id="aic12" /><input class="number" placeholder="12.)" name="name1" type="text" required id="name12" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic13" id="aic13" /><input class="number" placeholder="13.)" name="name1" type="text" required id="name13" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic14" id="aic14" /><input class="number" placeholder="14.)" name="name1" type="text" required id="name14" readonly style="width:50%" /><br />
<input readonly type="text" class="number" name="aic15" id="aic15" /><input class="number" placeholder="15.)" name="name1" type="text" required id="name15" readonly style="width:50%" /><br />
<input type="submit" name="send" id="send" disabled />
</form>

文本框为空时启用按钮的脚本：请注意其无效.

<script type="text/javascript">
$(function() {
    $('.number').on('input', function () {
        $('#send').prop("disabled", !$.trim(this.value));
    });

    $('.number').each(function() {
        if ($.trim(this.value).length) {
            $('#send').prop('disabled', false);
            return;
        }
    });
});
</script>

解决方法:

当您在浏览器外部填充文本框时,不会触发您的.on事件.如果您在下拉选择中使用以下代码设置文本框(看不到代码的那部分)：

$('.number').val('foo')

然后,您需要添加一个触发事件,如下所示：

$('.number').val('foo').trigger('input');

通过在填充输入时添加触发器,您的现有代码应该可以工作.请参阅代码的altered example.确保在第一次加载后运行它.

标签：jcombobox,html,javascript,jquery
来源： https://codeday.me/bug/20191122/2056723.html