jquery函數啟用禁用按鈕

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>

如果textbox為空，則啟用腳本：注意它不起作用。

<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');

通過在填充輸入時添加觸發器，您的現有代碼應該起作用。 請參閱此代碼略微更改的示例 。 第一次加載后一定要運行它。

Answer 3

嘗試：

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

無論如何，你說的是“無法”按鈕，但我認為你的意思是“啟用” ，這意味着對於殘疾人，我是否正確？