Disable Button If Not Match Username

Question

Currently I use jquery .keyup function to check if has started to type in the input field. And then it enabled button. Else if no text in input disables button.

Question:

Instead of keyup function I would like to be able to make the button disabled if the text that entered in the input is typed doesn't match this $user['username']

And then if text that is entered is matches then enable button

Input Field

<input type="text" id="input-user-<?php echo $user['username']; ?>" name="username" value="" class="form-control input-user" />

Script

<script>
$(document).ready(function(){

$('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', true);

    $('#input-user-<?php echo $user['username']; ?>').keyup(function(){

        if($(this).val().length !=0)

        $('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', false);            

        else

        $('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', true);
    });
});
</script>

View

<?php if ($users) { ?>
<?php foreach ($users as $user) { ?>
<div class="modal fade" id="myModal-<?php echo $user['username']; ?>">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header clearfix">
            <div class="pull-left">
            <h2 style="font-size: 18px;">Are you absolutely sure?</h2></div>
            <div class="pull-right">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            </div>
            <div class="modal-body">
            <div class="alert alert-warning text-center">
                Unexpected bad things will happen if you don't read this! 
            </div>
            <p class="text-center">If you delete this user, this user will not be able to login to the admin,
            and all of his or her user information will be <b>Removed For Ever!</b>
            </p>
            <br/>
            <p class="text-center">Please type in the username of the user to confirm.</p>
            <p class='error_msg'></p>
            <form role="form" action="<?php echo $action;?>" method="post" enctype="multipart/form-data" id="form_id">
                <div class="form-group">
                    <input type="text" id="input-user-<?php echo $user['username']; ?>" name="username" value="" class="form-control input-user" />
                    <input type="hidden" name="user_id" value="<?php echo $user['user_id']; ?>" class="form-control" />
                </div>
                <div class="form-group text-center">
                    <button type="submit" id="button-delete-user-<?php echo $user['username']; ?>" class="btn btn-user-delete"><span class="text-danger">I understand the consequences, deleting this user</span></button>
                </div>
            </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(document).ready(function(){

$('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', true);

    $('#input-user-<?php echo $user['username']; ?>').keyup(function(){

        if($(this).val().length !=0)

        $('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', false);            

        else

        $('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', true);
    });
});
</script>
<?php }?>
<?php }?>

Answer 1

Like this?

$(function() {
    $('.someInput').on('keyup',function() {
        var username = "test";
        if( $(this).val() == username ) {
            $('.someButton').attr('disabled', false);
        }
        else {
            $('.someButton').attr('disabled', true);
        }
    });
});

DEMO

EDIT

You can implement it in your script like this:

<?php if ($users) { ?>
<?php foreach ($users as $user) { ?>

            ....

            <form role="form" action="<?php echo $action;?>" method="post" enctype="multipart/form-data" id="form_id">
                <div class="form-group">
                    <input type="text" class="input-user" data-username="<?php echo $user['username']; ?>" name="username" value="" class="form-control input-user" />
                    <input type="hidden" name="user_id" value="<?php echo $user['user_id']; ?>" class="form-control" />
                </div>
                <div class="form-group text-center">
                    <button type="submit" class="button-delete-user" data-username="<?php echo $user['username']; ?>" class="btn btn-user-delete"><span class="text-danger">I understand the consequences, deleting this user</span></button>
                </div>
            </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

$(function() {
    $('button.button-delete-user').attr('disabled', true);
    $('.input-user').on('keyup',function() {
        var username = $(this).data('username');
        if( $(this).val() == username ) {
            $('button[data-username="'+username+'"]').attr('disabled', false);
        }
        else {
            $('button[data-username="'+username+'"]').attr('disabled', true);
        }
    });
});

UPDATED DEMO

Answer 2

Working example

$("#input-user").keyup(function(){
  console.log($(this).val(), $(this).data("name"));
  if($(this).val() == $(this).data("name"))    
    $("#button-delete-user").prop('disabled', false);
  else
    $("#button-delete-user").prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="input-user" data-name="username" name="username" value="" class="form-control input-user" />
  <button type="submit" id="button-delete-user" class="btn btn-user-delete" disabled>GO</button>
</form>