【问题标题】：Disable Button If Not Match Username如果不匹配用户名则禁用按钮
【发布时间】：2015-07-19 09:12:35
【问题描述】：

目前我使用jquery .keyup 函数来检查是否已经开始在输入字段中输入。然后它启用按钮。否则，如果输入中没有文本会禁用按钮。

问题：

如果在输入中输入的文本与 $user['username'] 不匹配，我希望能够禁用按钮，而不是 keyup 功能

如果输入的文本匹配，则启用按钮

输入字段

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

脚本

<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 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 }?>

【问题讨论】：

为什么你有一个 foreach 循环有点令人困惑？您实际上是在为每个用户呈现所有这些 HTML 吗？
我将 codeigniter 用于我的 php 方面，以便在 foreach 上方的表格列表中显示所有用户。我需要 foreach，并且像模态一样使用 foreach 效果更好。
一遍又一遍地复制相同的 HTML 是不好的。您应该重构只有一个模式，根据单击的删除按钮动态工作。
很好的建议会奏效。

标签： javascript php jquery

【解决方案1】：

像这样？

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

DEMO

编辑

您可以像这样在脚本中实现它：

<?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

【讨论】：

不适用于 OP 似乎正在使用的 foreach 方法
@LinkinTED 您刚刚删除的代码运行良好，您可以重新显示您的代码运行良好。

【解决方案2】：

工作示例

$("#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>

【讨论】：