Question

我的jquery有一个小问题...我有一个默认2个字段的表单，如果其中一个为空，则发送按钮关闭。它的工作原理

但我也加了一个＆＃34; +＆＃34;允许您添加文本字段的按钮，它也有效。但是这些字段的控制不起作用，如果发送按钮中没有任何内容仍然激活。

这是我的代码：

<table class="form-table" id="customFields">

    <tr valign="top">
        <th scope="row"><label for="customFieldName1">Question</label></th>
        <div class="input-field col s12">
        <td>
            <input type="text" class="" id="customFieldQuestion" name="customFieldName[]" value="test" placeholder="Question"/> &nbsp;
            <input type="text" class="" id="customFieldReponse" name="customFieldValue[]" value="test" placeholder="Reponse"/> &nbsp;

        <a href="javascript:void(0);" class="remCF">Supprimer</a>
        </td>
        </div>

    </tr>

</table>

<a href="javascript:void(0);" class="btn waves-effect waves-light btn-large" id="addCF" >+</a>
<button class="btn waves-effect waves-light btn-large" form="formfaq" type="submit" id="go" name="go">
    Envoyer<i class="material-icons right">send</i>
</button>
</form>



<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js"></script>


<script>
$(document).ready(function(){
    $("#addCF").click(function(){
        $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName1">Question</label></th><div class="input-field col s12"><td><input type="text" class="" id="customFieldQuestion" name="customFieldName[]" value="" placeholder="Question"/> &nbsp;<input type="text" class="" id="customFieldReponse" name="customFieldValue[]" value="" placeholder="Reponse"/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></div></tr>');
    });
    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});
</script>

<script>
$(document).ready(function(){
    $('#go').attr('disabled',false);

    $('[id="customFieldQuestion"]').keyup(function(){
        if($(this).val().length !=0)
            $('#go').attr('disabled', false);            
        else
            $('#go').attr('disabled',true);
    })

    $('[id="customFieldReponse"]').keyup(function(){
        if($(this).val().length !=0)
            $('#go').attr('disabled', false);            
        else
            $('#go').attr('disabled',true);
    })
});
</script>

提前感谢您的帮助

Answer 1

您不能拥有多个具有相同ID的元素。您的HTML无效（您有多个#customFieldQuestion和#customFieldReponse）。您需要使用类似其他内容或data-custom attributes。
您无法在动态内容上设置侦听器，您应该使用the delegation在静态父级上设置它，例如$('#customFields').on('keyup', '[data-custom="customFieldQuestion"]', function(){ ...

Answer 2

    <form>
    <table class="form-table" id="customFields">
        <tr valign="top">
            <th scope="row"><label for="customFieldName1">Question</label></th>
            <div class="input-field col s12">
                <td>
                    <input type="text" class="field_customFieldQuestion" id="customFieldQuestion" name="customFieldName[]" value="test" placeholder="Question"/> &nbsp;
                    <input type="text" class="field_customFieldReponse" id="customFieldReponse" name="customFieldValue[]" value="test" placeholder="Reponse"/> &nbsp;

                    <a href="javascript:void(0);" class="remCF">Supprimer</a>
                </td>
            </div>

        </tr>

    </table>

    <a href="javascript:void(0);" class="btn waves-effect waves-light btn-large" id="addCF" >+</a>
    <button class="btn waves-effect waves-light btn-large" form="formfaq" type="submit" id="go" name="go">
        Envoyer<i class="material-icons right">send</i>
    </button>
    </form>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js"></script>


<script>
    $(document).ready(function(){
        $("#addCF").click(function(){
            $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName1">Question</label></th><div class="input-field col s12"><td><input type="text" class="field_customFieldQuestion" id="customFieldQuestion" name="customFieldName[]" value="" placeholder="Question"/> &nbsp;<input type="text" class="field_customFieldReponse" id="customFieldReponse" name="customFieldValue[]" value="" placeholder="Reponse"/> &nbsp;<a href="javascript:void(0);" class="remCF">Remove</a></td></div></tr>');
            $('#go').attr('disabled',true);
        });
        $("#customFields").on('click','.remCF',function(){
            $(this).parent().parent().remove();
            $(".field_customFieldReponse").trigger("change")
        });
    });
</script>

<script>
    $(document).ready(function(){
        var customQue = 0;
        var customRes = 0;
        $('#go').attr('disabled',false);
        $("#addCF").click(function(){
            customQue = 0;
            customRes = 0;
        })
        var requiredFields =  ['customFieldQuestion', 'customFieldReponse'];
        requiredFields.forEach(function(input) {
            $(document).on("keyup blur change click", ".field_" + input, function(e) {
                if(input == "customFieldQuestion"){
                    if($(this).val().trim() != ""){
                        customQue = 1;
                    }else{
                        customQue = 0;
                    }
                }else if(input = "customFieldReponse") {
                    if($(this).val().trim() != ""){
                        customRes = 1;
                    }else{
                        customRes = 0;
                    }
                }
                else{

                    }
                if(customQue == 1 && customRes == 1){
                    $('#go').attr('disabled', false);
                }else{
                    $('#go').attr('disabled',true);
                }
            })
        });
    });
</script>

jquery错误，检查是否为空白表单

2 个答案: