禁用重复div内的所有按钮

时间:2014-03-20 09:01:43

标签: jquery jquery-templates

所以我有一个Jquery模板,向用户显示多个结果,结果的底部是一个div,我用来存储一些按钮。

现在,根据记录的状态,我想要隐藏e div中的所有按钮,但由于某种原因,以下内容无效:

$('#violationFooter').find('input,button').prop('disabled', true);

我尝试了其他几个设置,以下隐藏了父div

   $('#violationResults').hide();

但这也没有做任何事情

   $('#violationResults #violationFooter').hide();

我不知所措

修改

   <script id="violationtmpl" type="text/x-jquery-tmpl">
            <div class="row user-infos ${MessageId}">
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-12">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h3 class="panel-title">Violation</h3>
                        </div>
                        <div  class="panel-body">
                            <div class="row-fluid">
                                <div class="col-md-9 col-lg-9 hidden-xs hidden-sm">
                                    <table class="table table-user-information" id="scrollable" style="height: 200px;">
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div id="violationFooter" class="panel-footer">
                            <button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick="" ><i class="fa fa-user-md"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script> 

*编辑*

这是填充模板的调用

function GetViolations(messageId) {

            $.ajax({
                type: "POST",
                url: "Default.aspx/GetViolationMessages",
                cache: false,
                data: JSON.stringify({ messageId: messageId }),
                contentType: "application/json; charset-utf-8",
                dataType: "json",
                error:
                    function(xhr) {

                        var contentType = xhr.getResponseHeader("Content-Type");
                        if (xhr.status === 401 && contentType.toLowerCase().indexOf("text/html") >= 0) {
                            window.location.reload();
                        }
                    },
                success: function(msg) {
                    // Need to work out a way of refreshing the screen

                    $.each(msg.d, function(index, item) {

                        $('#violationtmpl').tmpl(item).appendTo('#violationResults');

                    });


                    var panels = $('.user-infos');
                    var panelsButton = $('.dropdown-user');
                    panels.hide();

                    //Click dropdown
                    panelsButton.click(function() {
                        //get data-for attribute
                        var dataFor = $(this).attr('data-for');
                        var idFor = $(dataFor);

                        //current button
                        var currentButton = $(this);
                        idFor.slideToggle(400, function() {
                            //Completed slidetoggle
                            if (idFor.is(':visible')) {
                                currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
                            } else {
                                currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
                            }
                        });
                    });

                    $('[data-toggle="tooltip"]').tooltip();
                }
            });
        };

修改

呈现HTML图片

enter image description here

3 个答案:

答案 0 :(得分:2)

试试这个:

$('#violationFooter button').hide()

或更好

$('.panel-footer button').hide()

答案 1 :(得分:1)

<强> HTML

<button class="btn  btn-success btn-xs hideButton" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick="" >
  <i class="fa fa-user-md"></i>
</button>
<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick="" >
  <i class="fa fa-user-md"></i>
</button>

<强> jquery的

$('.hideButton').css("display", "none");
$('.hideButton').hide();

你可以将你自己的类添加到需要隐藏的按钮..例如,这里的第一个按钮将隐藏第二个不会!

答案 2 :(得分:0)

好的,所以看起来我试图隐藏那些不存在的东西:-)我追踪按钮被渲染的位置,我试图在它们被绘制之前隐藏它们,dooooh

感谢您的输入人员