Show/Hide message if textarea is empty or not

I have 4 textareas and a submit button that are disabled, aside each of textarea there is a checkbox to enable them.

When checkbox is checked:

1- A message shows (Don't let this activated textarea empty). 2- Submit button remains disabled. 3- When starting to write: message hides and submit button is enabled.

When checkbox is uncheked :

1- message hides,

2- textarea related to that checkbox is cleared

3- submit button returns to disabled.

With my codes below this works perfectly for only the first textarea. But for the others textareas i have only this problem:

1- When starting to write: message keeps showing and submit button remains disabled. How can i solve this ?

//Function that handle the checkbox
$('input:checkbox').change(function() {
if ($(this).prop('checked')) {
$(".textareaalert").text("Don't let this activated textarea empty");
 $(".textareaalert").slideDown("slow"); 
$("#submit").attr("disabled", "disabled");   
  } else {
    $(".textareaalert").slideUp("slow");
    $("#submit").attr("disabled", "disabled");
    $("textarea").val('');      
     }
 });

 //Function that handle the textarea
$("textarea").keyup(function(){
var textareaLength = $("textarea").val().length;
if ( textareaLength ==0 ) {
    $(".textareaalert").text("Don't let this activated textarea empty");
    $(".textareaalert").slideDown("slow");
    $("#submit").attr("disabled", "disabled");
} else {
    $(".textareaalert").slideUp("slow");
    $("#submit").removeAttr("disabled");
}
});