寻求帮助，涉及jQuery和JS脚本

Question

我在这里的fiddle里面有所需要的内容：http://jsfiddle.net/mPuj9/4/

我的目标是在所有文本框都填写并且复选框被勾选之前禁用按钮。我的代码目前不够好，它允许在某些情况下提交，而且我不知道如何使用复选框。

CODE

$(document).ready(function() {
    $('.textfield').blur(function() {
        if ($.trim(this.value) == "") {
            $('#btnUpdate').attr("disabled", true);
        }
        else {
            $('#btnUpdate').removeAttr("disabled");
        }
    });
});

$(document).ready(function() {
    $('#termid').change(function() {
        var val = $(this).val();
        $('#reservationdetails').empty().addClass('loading').load('../kratisis/forms/' + val + '.php', function() {
            $('#reservationdetails').removeClass('loading')
        });
    });
});

- EnexoOnoma

---

请不要发布仅包含链接到离线代码的问题。"请修复这个代码块"的问题是"过于局限"的明确定义。 - user229044

Answer 1

Here you go

http://jsfiddle.net/mPuj9/8/

$(document).ready(function () {
    $('form').delegate('input:text, input:checkbox', 'blur keyup change', function () {
        if(($('form input:text').filter(function(){ return $.trim(this.value) == ''; }).length > 0)
           || ($('form input:checked').length == 0)){
          $('#btnUpdate').attr("disabled", true);
        }
      else {
            $('#btnUpdate').removeAttr("disabled");
      }
    });
});

- ShankarSangoli

---

@Giorkouros - 看看这个fiddle。 - ShankarSangoli

这个很好用，但有一个小问题。当用户点击文本框外部时，提交按钮会被禁用或启用。是否有办法在文本框中插入内容时也能实现这一点？我问这个问题是因为我在一个文本框中使用了jQuery日期选择器。 - EnexoOnoma

这很完美。当你访问希腊时，联系我，在我的朋友的bouzoukia享受一瓶免费酒。 - EnexoOnoma

Answer 2

这里有另一种方法可以实现这个功能，如果有人在文本框中按下回车键或者浏览器自动填充输入框也可以正常工作：

$(function() {
    $("form button").attr("disabled", true); //disable buttons at first
    var inputs = 0; //keep count of the inputs
    $("form input, form select, form textarea").each(function() {
        inputs++; //increment counter
        $(this).keypress(function() {
            if ($.trim($(this).val()) != "") { //if the value isnt empty
                inputs--; //decrement counter
                if (inputs == 0) { //if theyre all filled in
                    $("form button").attr("disabled", false);
                }
            }
        }).trigger("keypress"); //in case it was autofilled by the browser
    });
    $("form").submit(function(e) { //prevent the form being submitted by pressing enter
        if (inputs != 0) { //if they arent all filled in
            alert("Some fields aren't filled in. Please fix them and try again."); //tell the user
            e.preventDefault(); //cancel sending the form
            return false;
        }
    });
});

- kirb

---

这是你的代码的fiddle链接http://jsfiddle.net/mPuj9/6/，我还没有让它工作。你能看一下吗？ - EnexoOnoma

@Girokouros 我现在就做。 - kirb

我找到了问题所在：当所有内容都填写完毕时，我将按钮设置为禁用状态而不是启用状态。这里是在jsfiddle上工作版本的链接。 - kirb

你好。我像普通人一样填写了表格，但按钮仍然无法使用。当我在一个字段中按退格键并重新输入时，它就可以用了... - EnexoOnoma

@Giorkouros 你需要点击文本框以触发代码。你可以将所有“change”更改为“keypress”，以便在每次按键时检查内容。我会在答案中更新代码。 - kirb

Answer 3

我认为问题在于你没有对文本字段使用.each()方法。你只是检查最近更改的一个字段是否为空，但你没有检查每个字段。

- bozdoz