Question

任何人都可以帮助我处理我的代码...我想要做的是如果输入textbox不为空但在我当前的代码中无效，则启用禁用按钮。

我有一个selectbox，如果我从中选择textbox将自动填充，但如果我选择为空，则文本框将为空。

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

在我的浏览器中输出： 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>

Answer 1

如果使用代码设置文本框的值，则不会触发input事件。在更改事件中，填充文本框后，应检查所有文本框是否都有值，然后启用/禁用该按钮。

function here() {
    // ... current code that populates the text boxes ...


    var disableBtn = false;
    // check if all text boxes have a value
    $('.number').each(function(i,el) {
        if (!$.trim($(el).val()).length) {
            disableBtn = true;
        }
    });

    $('#send').prop("disabled", disableBtn);
}

Answer 2

当您在浏览器外部填充文本框时，您的.on事件不会触发。如果您在下拉选择时设置了带有此类代码的文本框（无法看到代码的那一部分）：

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

然后你需要添加一个这样的触发事件：

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

通过在填充输入时添加触发器，您的现有代码应该起作用。请稍微查看代码altered example。第一次加载后一定要运行它。

Answer 3

尝试：

$('#send').removeAttr('disabled');

无论如何，你说的是“无法”按钮，但我认为你的意思是“启用”，这意味着禁用的opossite，我是否正确？

jquery函数启用禁用按钮

3 个答案: