禁用/启用的按钮基于使用Javascript/jQuery的

Question

我有一堆的控制多个其他控制：

当用户点击生成按钮，一个函数使用所有从值的其他控件生成一个字符串，然后放入标签文本框中。

所有其他控件可以具有null或空字符串的值。要求是，如果ANY的控件没有用户输入值，则“生成”按钮将被禁用。一旦全部控件有一个有效值，然后生成按钮启用。

使用Javascript/jQuery执行此操作的最佳方法是什么？

Answer 1

这可以进一步优化，但应该让你开始：

var pass = true; 

$('select, input').each(function(){ 
    if (! ($(this).val() || $(this).find(':selected').val())) { 
     $(this).focus(); 
     pass = false; 
     return false; 
    } 
}); 

if (pass) { 
    // run your generate function 
} 

http://jsfiddle.net/ZUg4Z/

注：不要使用此：if (! ($(this).val() || $(this).find(':selected').val()))。
这只是为了说明的目的。

Answer 2

如果你想生成按钮以尽快用户按下一键启动，那么你可能想捕捉每个输入和每个选择框更改事件的按键事件。处理程序都可以指向一种启用/禁用“生成”按钮的方法。

function updateGenerateButton() { 
    if (isAnyInputEmpty()) { 
     $("#generateButton").attr("disabled", "disabled"); 
    } else { 
     $("#generateButton").removeAttr("disabled"); 
    } 
} 

function isAnyInputEmpty() { 
    var isEmpty = false; 
    $("#input1, #input2, #select1, #select2").each(function() { 
     if ($(this).val().length <= 0) { 
      isEmpty = true; 
     } 
    }); 
    return isEmpty; 
} 

$("#input1, #input2").keypress(updateGenerateButton); 
$("#select1, #select2").change(updateGenerateButton); 

上面假设您的输入标签具有“id”属性，如input1和select2。

Answer 3

此代码假定所有表单字段都具有空字符串的默认值。

$('selector_for_the_parent_form') 
    .bind('focus blur click change', function(e){ 

    var 
     $generate = $('selector_for_the_generate_button'); 

    $generate.removeAttr('disabled'); 

    $(this) 
     .find('input[type=text], select') 
     .each(function(index, elem){ 
      if (!$(elem).val()) { 
      $generate.attr('disabled', 'disabled'); 
      } 
     }); 

    }); 

基本上，只要一个事件冒泡到可能影响是否产生按钮应该被显示的形式，测试的任何输入是否具有空值。如果有，则禁用该按钮。

声明：我还没有测试过上面的代码，只是一次性写过。