Question

I have a form with a few textareas and selectors and the submit button which is disabled be default. I need to remove “disabled” attribute when each textarea has has at least something in them.

Tried this, but it does not seem to work:

$("#mySubmit").parent().find("textarea").change(function(){
    if ($(this).val() != "") {
        $("#mySubmit").removeAttr("disabled");
    } else {
        $("#mySubmit").attr("disabled");
    }   
}); 

What am I missing?

Answer 1

Try this

var $textarea = $("#mySubmit").parent().find("textarea");
var disable = ($("#mySubmit").parent().find("textarea").filter(function(){
    return $.trim($(this).val()) == "";
}).length == $textarea.length);  
$("#mySubmit").prop("disabled", disable);

.prop() reference: http://api.jquery.com/prop/ jQuery Ver 1.6+

If you are using older version then use attr/removeAttr instead of prop.

if(disable){
    $("#mySubmit").removeAttr("disabled");
}
else{
    $("#mySubmit").attr("disabled", true);
}