1

在我允许用户按下提交按钮之前，我正在尝试验证此表单中的所有输入是否属于 .has-success 类。问题是一旦达到所有输入并且它们都具有 .has-success 类，按钮将不会激活。这是我的代码：

jQuery：

$('#groupUsuario, #passwordVerificationUsuario, #passwordUsuario, #nombreUsuario').on('click change blur focus', function(){
     if ($('#groupUsuario').hasClass('has-success') && $('#passwordVerificationUsuario').hasClass('has-success') && $('#passwordUsuario').hasClass('has-success') && $('#nombreUsuario').hasClass('has-success')){
        $('#ingresarUsuario').attr('disabled', false);
     } else  $('#ingresarUsuario').attr('disabled', true);
});

这是HTML：

 <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="well text-center">
                        <div class="panel panel-primary">
                            <h1 class="text-center">Weiver - Usuarios</h1>
                            <hr>
                            <div class="panel-body">
                                <form method="post" role="form" enctype="multipart/form-data">
                                    <div id="nameUserValidation" class="form-group">
                                        <label class="control-label" for="nombreUsuario">Nombre del Usuario</label>
                                        <input type="text" class="form-control" name="nombreUsuario" id="nombreUsuario" placeholder="nombre del cine">
                                    </div>
                                    <div id="passwordUserValidation" class="form-group">
                                        <label class="control-label" for="passwordUsuario">Contraseña</label>
                                        <input type="password" class="form-control" name="passwordUsuario" id="passwordUsuario" placeholder="nombre del cine">
                                    </div>
                                    <div id="passwordVerificationUserValidation" class="form-group">
                                        <label class="control-label" for="passwordVerificationUsuario">Verificar Contraseña</label>
                                        <input type="password" class="form-control" name="passwordVerificationUsuario" id="passwordVerificationUsuario" placeholder="nombre del cine">
                                    </div>
                                    <div id="groupUserValidation" class="form-group">
                                        <label class="control-label" for="groupUsuario">Grupo al que Pertenece</label>
                                        <select class="form-control" name="groupUsuario" id="groupUsuario">
                                            <option value="nada">Seleccione un Grupo</option>
                                        </select>
                                    </div>
                                </form>
                                <hr>
                                <div class="well" style="margin-bottom: 0 !important;">
                                    <p style="text-align: justify"><strong>Nota: </strong>Que todos los campos estan verdes no significa que la informacion ingresada esta correcta. Solo significa que se ingreso informacion en todos los campos, que se terminara de validar cuando se mande al servidor.</p>
                                    <button type="submit" name="ingresarUsuario" id="ingresarUsuario" class="btn btn-success pull-right" disabled="disabled">ingresar Usuario</button>
                                    <a href="menu.php" class="btn btn-default pull-left">Menú Principal</a>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

一定是有点傻，也许有人能发现错误，我已经连续编码了大约 10 个小时，我有点头晕。我在另一个表单上有相同的示例，在那个表单上，它确实有效，当所有被检查的输入都具有 .has-success 类时，按钮将其禁用属性更改为“”。

欢迎任何帮助和建设性的批评！

4

3 回答 3

1

我想我以前遇到过这种问题。您是否尝试过删除该disabled属性？像那样 ：

$('#groupUsuario, #passwordVerificationUsuario, #passwordUsuario, #nombreUsuario').on('click change blur focus', function(){
    if ($('#groupUsuario').hasClass('has-success') && $('#passwordVerificationUsuario').hasClass('has-success') && $('#passwordUsuario').hasClass('has-success') && $('#nombreUsuario').hasClass('has-success')){
        $('#ingresarUsuario').removeAttr('disabled');
    } else {
        $('#ingresarUsuario').attr('disabled', true);
    }

});

附带说明一下，我还建议在您的输入中添加一个默认类（或 data-* 属性，如果它根本与样式无关），并比较两个clickjQuery数组 :和. 那将更具可读性。changeblurfocus$('.need-success')$('.has-success')

于 2013-10-19T16:46:53.787 回答
0

别介意。我发现了错误。我应该使用 div 的 ID 从引导程序设置错误类，而不是实际的输入 ID。

已经 40 分钟试图找到错误。现在可以了。

这是代码：

 $('#nombreUsuario, #passwordUsuario, #passwordVerificationUsuario, #groupUsuario').on(
'click blur focus mouseleave mouseenter change', function(){
     if (
           $('#nameUserValidation').hasClass('has-success')
           &&
           $('#passwordUserValidation').hasClass('has-success')
           &&
           $('#passwordVerificationUserValidation').hasClass('has-success')
           &&
           $('#groupUserValidation').hasClass('has-success')
         ){
              $('#ingresarUsuario').attr('disabled', false);
     } else   $('#ingresarUsuario').attr('disabled', true); 
});

我在 .hasClass() 验证的输入中使用了相同的 ID。

于 2013-10-19T17:13:48.900 回答
0

我会尝试使用 FireBug 或类似的东西来隔离您的问题，以观察您对 .attr('disabled', ...) 的调用是否正确命中。

考虑使用 .removeAttr('disabled') 而不是 .attr('disabled', false)。

于 2013-10-19T16:47:35.953 回答