限制 - 只檢查一個複選框

Question

我有一個小問題，一個「樹視圖」中的JS 所做的樹狀工作正常，但現在我需要應用一些限制。

樹形視圖具有以下結構： 父>節點> sunode

的限制是我不能「父」內選擇多個「節點」，進而，將其「節點」內，我不能選擇多個「子節點」。也就是說，我只能各自父節點的複選框之間標記。

如果我在「子節點」內設置了另一個複選框，則必須取消選中已經添加了新複選框的複選框（如單選按鈕）。

並與 「節點」 一樣，只能有顯着的每一個 「父」

<div id="treeview-container"> 
     <ul> 
      <li>Parent 1</li> 
      <li>Parent 2 
       <ul> 
        <li>node 2.1</li> 
        <li>node 2.2 
         <ul> 
          <li data-value="2.2.1">subnode 2.2.1</li> 
          <li data-value="2.2.2">subnode 2.2.2</li> 
          <li data-value="2.2.3">subnode 2.2.3</li> 
         </ul> 
        </li> 
        <li>node 2.3</li> 
       </ul> 
      </li> 
      <li>parent 3 
       <ul> 
        <li data-value="3.1">node 3.1</li> 
        <li data-value="3.2">node 3.2</li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

這裏內的節點的JS：

(function($){ 
    var plugin = { 
     name: 'TreeView', 
     version: '1.0.0' 
    } 
    var defaults = { 
     debug : false, 
     autoExpand : false, 
     css : { 
      list : 'fa-ul', 
      listItem : 'fa-li fa', 
      collapsed : 'fa-caret-right', 
      expanded : 'fa-caret-down' 
     } 
    } 

    var settings; 
    var debug, me = null; 

    function __changeHandler(e) { 
     var currentTarget = $(this); 
     var isChecked = currentTarget.is(':checked'); 

     debug.log(currentTarget); 
     debug.log("Checked ", isChecked) 

     if (!isChecked) { 
      debug.log('Uncheck all childs'); 

      currentTarget.parent() 
         .find('input.tw-control') 
         .prop('checked', false); 
     } 

     if (isChecked) { 
      debug.log('Check my parents tree'); 

      currentTarget.parents('li') 
         .find('>input.tw-control') 
         .prop('checked', true); 
     } 

     _toggleCollapse(currentTarget); 

     me.trigger('treeview.change', currentTarget, me); 
    } 

    function _toggleCollapse (element) { 
     debug.log("Toggle collapse"); 

     var chk = $('input[type="checkbox"]:checked'); 

     if (chk.is(':checked')) { 
      debug.log('Open checked branchs'); 
      chk.parent() 
       .find('>ul.collapse') 
       .collapse('show') 
       .parent() 
       .find('>i.fa-li') 
       .removeClass(settings.css.collapsed) 
       .addClass(settings.css.expanded); 
     } 

     if (!element.is(':checked')) { 
      debug.log('Hide branch'); 

      element.parent() 
        .find('ul.collapse') 
        .collapse('hide') 
        .parent() 
        .find('i.fa-li') 
        .removeClass(settings.css.expanded) 
        .addClass(settings.css.collapsed); 
     } 
    } 

    function _init() { 
     debug.log("Initializing plugin"); 

     me.on('change', 'input.tw-control', __changeHandler); 

     debug.log("Collapsing tree"); 


     me.find('>ul') 
      .addClass(settings.css.list) 
      .find('ul') 
      .addClass('collapse ' + settings.css.list) 
      .parent() 
      .prepend(
       $('<i></i>').addClass(settings.css.listItem + ' ' + 
            settings.css.collapsed) 
     ); 

     if (settings.autoExpand) { 
      me.find('ul.collapse').collapse('show'); 
     } 

     debug.log("Adding checkbox"); 

     me.find('li').each(function(index, element) { 
      var elmt = $(element); 

      var chk = $('<input/>').prop('type', 'checkbox') 
            .prop('class', 'tw-control') 
            .prop('value', elmt.attr('data-value')); 

      debug.log("Checking if the element is selected"); 

      var isChecked = elmt.attr('data-checked'); 

      elmt.prepend(chk); 

      if (isChecked) { 
       debug.log('Toggle checkbox'); 

       chk.prop('checked', true); 

       chk.trigger('change'); 
      } 
     }); 
    } 

    function _fill(data) { 
     $(data).each(function (index, element) { 
      me.find('input[value="' + element + '"]') 
       .prop('checked', true) 
       .trigger('change'); 
     }); 
    } 

    var publicMethods = { 
     init : function(options) { 
      me = this; 

      settings = $.extend(defaults, options); 

      debug = $.Logger(settings.debug, plugin); 

      _init(); 

      debug.log('Ready'); 

      _fill (options.data); 

      return this; 
     }, 
     selectedValues: function() { 
      debug.log("Getting selected values"); 

      var chk = me.find('input[type="checkbox"]:checked'); 
      var output = []; 

      chk.each(function(index, item) { 
       var item = $(item); 

       if(typeof item.parent().attr('data-value') !== typeof undefined) { 
        output.push(item.attr('value')); 
       } 
      }) 

      return output; 
     } 
    } 

    $.fn.treeview = function (options) { 
     if (publicMethods[options]) { 
      return publicMethods[ options ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof options === 'object' || ! options) { 
      // Default to "init" 
      return publicMethods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + options + ' does not exist on jQuery.treeview'); 
     } 
    } 

}(jQuery)); 

$('#treeview-container').treeview({ 
      debug : true, 
      data : ['3.2', '2.2.3'] 
     }); 

http://codepen.io/vilacactus/pen/BpMjOp?editors=1010#0

誰能幫我？非常感謝你

Answer 1

您可以監聽treeview.change事件，並檢查，以假爲所有的兄弟姐妹：

$('#treeview-container').treeview({ 
 
    debug : false, 
 
    data : ['3.2', '2.2.3'] 
 
}); 
 
$('#treeview-container').on("treeview.change", function (e, ele) { 
 
    if ($(ele).parents('ul').length > 1) { // not on root elements 
 
    $(ele).closest('li').siblings().find(':checkbox').prop('checked', false); 
 
    } 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="http://www.jqueryscript.net/demo/Checkable-Collapsible-jQuery-Tree-View-Plugin-Treeview/dev/logger.js"></script> 
 
<script src="http://www.jqueryscript.net/demo/Checkable-Collapsible-jQuery-Tree-View-Plugin-Treeview/dev/treeview.js"></script> 
 

 

 
<div id="treeview-container"> 
 
    <ul> 
 
     <li>Parent 1</li> 
 
     <li>Parent 2 
 
      <ul> 
 
       <li>node 2.1</li> 
 
       <li>node 2.2 
 
        <ul> 
 
         <li data-value="2.2.1">subnode 2.2.1</li> 
 
         <li data-value="2.2.2">subnode 2.2.2</li> 
 
         <li data-value="2.2.3">subnode 2.2.3</li> 
 
        </ul> 
 
       </li> 
 
       <li>node 2.3</li> 
 
      </ul> 
 
     </li> 
 
     <li>Parent 3 
 
      <ul> 
 
       <li data-value="3.1">node 3.1</li> 
 
       <li data-value="3.2">node 3.2</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>