Question

使用我当前的代码，用户可以附加文件，文件名将显示在文本字段中，并且将显示视图链接，如果用户单击视图链接，它将在新页面中打开。

我的问题是视图链接显示在第二个附件行中，但只有当用户附加文件时，才应显示视图链接。

第二个如果用户点击接受勾选，则应禁用附件我有禁用按钮的css类：

.cst_select_dis{
    background-color: #b9b9b9;
    color: #fff;    
    border-bottom:2px solid #000;
    width: 91px;
    height: 25px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    margin-left:20px;
}

这是当前的jQuery代码：

$(document).ready(function () {

    var $preview = $(".preview");
    $preview.hide();

    $(".checkfile").on("change", function(){     
        var filename = this.value;
        var files = this.files;
        var URL = window.URL||window.webkitURL;
        var url = URL.createObjectURL(files[0]);
        $preview.attr("href", url);
        $preview.show();
        //$acceptdiv.show();
        document.getElementById('file_name').value = filename;
        $("#file_name").prop("disabled", true);
    });

    $(document).on('click', ".accpt_chk", function () {
        if ($('.accpt_chk').is(':checked')) {
            $('.checkfile').attr('disabled', 'true');
            $('.cst_select ').addClass("cst_select_dis");
        } else {
            $('.checkfile').removeAttr('disabled')
            $('.checkfile').prop('enabled', false);
            $('.cst_select ').removeClass("cst_select_dis");
            //$('#btn_selct').hasClass('.cst_select ').remove().addClass('.cst_select_dis');
        }
        //$('.qq-upload-button').prop('disabled', !this.checked);
    });

    $('.checkfile').on('change', function (e) {
        myfile = $(this).val();    
        var ext = myfile.split('.').pop();
        if (ext == "pdf" || ext == "jpeg") {
            $(file_name).val(myfile);
        } else {
            alert('Invalid File Type')
            e.preventDefault();
        }
        if(e.currentTarget.files[0].size>=1024*1024*5) {
            alert('File Size cannot be more than 5 MB')
            e.preventDefault();
        }
    });
});

请建议我。

这是小提琴Link

Answer 1

检查内联评论以获取详细说明和 DEMO here

$(".checkfile").on("change", function(){     
     var filename = this.value;
     var files = this.files;
     var URL = window.URL||window.webkitURL;
     var url = URL.createObjectURL(files[0]);
     $(this).closest('.row').find('.preview').attr("href", url).show();
     //get current group's preview element using $(this) and add show in same line
     document.getElementById('file_name').value = filename;
     $("#file_name").prop("disabled", true);
});
//your checkbox class is not accpt_chk instead it is lbl_chk_acpt_right and so click event was not firing
$(document).on('click', ".lbl_chk_acpt_right", function () {
     if ($(this).is(':checked')) {
          $(this).closest('.row').find('.checkfile').attr('disabled', true);
          $(this).closest('.row').find('.cst_select ').addClass("cst_select_dis");
          //again get the element to disable using $(this)
     } else {
          $(this).closest('.row').find('.checkfile').removeAttr('disabled')
          $(this).closest('.row').find('.cst_select ').removeClass("cst_select_dis");
     }
});

<强>更新

<强> Updated DEMO

我分析时代码中有很多错误，我可以强调重要的2或3个错误，如下所示：

您已为onchange两次写了.checkfile次事件，这是不必要的

您已将同一id提供给不同的输入#file_name，这是一个严重的错误并违反了HTML规则，因为id中应该有唯一的DOM。所以我使用了.check
的input element类
每当您引用某个组的元素时，请尝试将其引用$(this)，以便您定位正确的元素。

也添加了一些内联评论

$(document).ready(function () {
    var $preview = $(".preview");    
    $preview.hide();
    $(".checkfile").on("change", function(){     
        var filename = this.value;
        var files = this.files;
        var URL = window.URL||window.webkitURL;
        var url = URL.createObjectURL(files[0]);
        $(this).closest('.row').find('.preview').attr("href", url).show();
        $(this).next('.check').prop("disabled", true);
        var myfile = $(this).val();    
        var ext = myfile.split('.').pop();
        if (ext == "pdf" || ext == "jpeg" || ext=="jpg") {
            $(this).next('.check').val(filename);
            //again get the next element of input type=file with $(this)
            //$(this) refers to current element and here its .checkfile element
        } else {
            $(this).closest('.row').find('.preview').hide()
            alert('Invalid File Type')
            $(this).next('.check').val('');
            e.preventDefault();
        }
        if(e.currentTarget.files[0].size>=1024*1024*5)
        { 
            alert('File Size cannot be more than 5 MB')
            e.preventDefault();
            $(this).closest('.row').find('.preview').hide()
            //hide view link here too
        }
    });
    $(document).on('click', ".lbl_chk_acpt_right", function () {
        if ($(this).is(':checked')) {
            $(this).closest('.row').find('.checkfile').attr('disabled', true);
            $(this).closest('.row').find('.cst_select ').addClass("cst_select_dis");
        } else {
            $(this).closest('.row').find('.checkfile').removeAttr('disabled')
            $(this).closest('.row').find('.cst_select ').removeClass("cst_select_dis");
        }
    });
});

当用户使用jquery

1 个答案: