Edit in JSFiddle

    // disable a submit button by default

    // click button event .
    // keyup event function
        // get length of inputs into textarea
        var count = $(this).val().length ;
        if (count >  140 || count === 0)
             // disable button

                // change a color of progress bar depend on it value
                // remove any character more than 140
                $(this).val( $(this).val().slice(0,140) );
                // update counter
                count = $(this).val().length ;
             // activate submit button
            // set value to progress bar
            // change a color of progress bar depend on it value
        // write a value into progress bar             
        $(".progress-bar span").text(count); 
        <div class="container">
            <div class=" well col-lg-8 col-lg-push-2  col-md-8 col-md-push-2  col-sm-8 col-sm-push-2 col-xs-12" style="margin-top:30px;">
              <form class="form-group" method="post" action="#">
                  <h3 class="text text-center">{ Counter Letters }</h3>
                    <textarea class="form-control" cols="20" rows="5" id="messageBox"></textarea>
                  <br /> <br />
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display:inline;">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 pull-right">
                        <div class="progress progress-striped active" style="height:30px;">
                              <div class="progress-bar brogress-bar-primary" role="progressbar" aria-valuenow="00"
                              aria-valuemin="0" aria-valuemax="140" style="width:0%">
                                  <span style="font-weight:bold;">0</span>
                    <button type="submit" class="btn btn-md btn-primary pull-left" id="submitBtn">
                        <span class="glyphicon glyphicon-send"></span>