Question

大家好我正在尝试禁用queryUI部分，我只有两个部分，到目前为止我已经尝试了一些我的黑客，但似乎没有工作，

这是我到目前为止所尝试的，

        //Enable section1 by remove attributes
        $('#subfacEdit').removeAttr("disabled");//div
        $('#subfacEdit').removeAttr("display");//div
        $('#HeadersubfacEdit').removeAttr("disabled");//H3
        $('#HeadersubfacEdit').removeAttr("display");//H3

        //Disable section2
        $('#facEdit').attr("disabled", "disabled");//div
        $('#facEdit').attr("display", "none");//div
        $('#HeaderfacEdit').attr("disabled", "disabled");//H3
        $('#HeaderfacEdit').attr("display", "none");//H3

        $('#editAccdordian').accordion("activate", 1);//activate section2

分析： Div确实被禁用了，但我猜显示属性未被应用，我只想让make部分无法通过任何方式。

我尝试过MasterMinds解决方案几乎没有变化？
http://jsfiddle.net/X8MFf/15/

Answer 1

您可以为要禁用的属性添加特殊data-属性，例如data-enabled="false"。然后，使用beforeActivate事件，防止切换。

的内容

$( "#EditAccdordian" ).on( "accordionbeforeactivate", function( event, ui ) {
  if( ui.newHeader && ui.newHeader.attr('data-enabled') == 'false') {
    event.preventDefault();
  }
} );

您还可以在手风琴创作中绑定事件。

$( "#EditAccdordian" ).accordion({
  beforeActivate: function( event, ui ) {
    if( ui.newHeader && ui.newHeader.attr('data-enabled') == 'false') {
      event.preventDefault();
    }
  }
});

您的已停用标头现在应如下所示：

<h3 id="HeaderfacEdit" data-enabled="false">Header content</h3>

修改我删除了ui.newHeader的jquery选项，因为它是一个jquery对象。对象的验证应该在折叠时为空（参见documentation）。

Answer 2

试试这个会对你有用......

$(".DISABLE").click(function(){
      $(this).next().hide();
      $("#accordion").accordion({active:current});
  });

Complete Example

...
//JAVASCRIPT
$(document).ready(function() {
  var $accordion = $("#accordion").accordion({ collapsible: true });
  $( "#accordion" ).accordion( "option", "clearStyle", true );

  var current=null;

  $("#accordion h3:not(.DISABLE)").click(function(){
    current = $accordion.accordion("option","active");       
  });

  $(".DISABLE").click(function(){
      $(this).next().hide();
      $("#accordion").accordion({active:current});
  });
});
...  
  //HTML
  <div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        MUK - 1
    </div>
    <h3 **class="DISABLE"**><a href="#">Section 2 (Disabled)</a></h3>
    <div>
        MUK - 2
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        MUK - 3
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        MUK - 4
    </div>
</div>

如何禁用Jquery UI手风琴部分

2 个答案: