2

大家好，我正在尝试禁用 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 确实被禁用了，但我猜显示属性没有应用，我只想通过任何方式使部分不可点击。

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

4

2 回答 2

3

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 对象。对象的验证应该在折叠时进行，因为它是空的（参见文档）。

于 2012-12-03T12:31:30.887 回答
2

试试这个对你有用...

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

完整示例

...
//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>
于 2012-12-05T06:34:00.743 回答