我想在4个输入字段为空时禁用提交按钮

<input type="text" name="val1" id="val1">
<input type="text" name="val2" id="val2">
<input type="text" name="val3" id="val3">
<input type="text" name="val4" id="val4">


提交按钮

<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />


我在用

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('.sendButton').attr('disabled',true);

            $('#val1').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);
                }
            })
            $('#val2').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);
                }
            })
            $('#val3').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);
                }
            })
            $('#val4').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);
                }
            })
        });
        </script>


我想我用错了。我将所有ID放在一个函数中。

 $('#val1','#val2','#val3','#val4').keyup(function(){


此代码不起作用。任何建议。在这些函数中如何使用&和condition(val1&val2&val3&val4)?

最佳答案

我尝试解决此问题的方法如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

    $("#val1").keyup(function(event) {
        validateInputs();
    });

    $("#val2").keyup(function(event) {
        validateInputs();
    });

    $("#val3").keyup(function(event) {
        validateInputs();
    });

    $("#val4").keyup(function(event) {
        validateInputs();
    });

    function validateInputs(){
        var disableButton = false;

        var val1 = $("#val1").val();
        var val2 = $("#val2").val();
        var val3 = $("#val3").val();
        var val4 = $("#val4").val();

        if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
            disableButton = true;

        $('.sendButton').attr('disabled', disableButton);
    }
</script>


这样,您将拥有一个检查逻辑的地方,并且如果以后打算增加更多的输入,则不必将其维持在N个地方。还有一个更好的解决方案是为您的输入提供相同的类,以便您可以执行类似的操作

$(".myInputs").keyup(function(event){
    validateInputs();
});


这是一个jsFiddle示例:https://jsfiddle.net/moj2dnup/

关于javascript - 输入字段为空时禁用提交按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52774285/

10-12 12:54
查看更多