防止父類別單選按鈕被點擊

Question

我有這個函數/腳本將複選框轉換爲單選按鈕（在類別metabox中），但我需要擴展功能，但我不確定如何去關於它。

腳本：

function convert_root_cats_to_radio() { 
    global $post_type; 
?> 
<script type="text/javascript"> 
jQuery("#categorychecklist>li>input").each(function(){ 
    this.disabled = "disabled"; 
}); 
jQuery("#categorychecklist>li>ul>li>input").each(function(){ 
    this.disabled = "disabled"; 
}); 
jQuery("#categorychecklist>li>label input").each(function(){ 
    this.type = 'radio'; 
}); 
jQuery("#categorychecklist>li>ul>li>label input").each(function(){ 
    this.type = 'radio'; 
}); 
// Hide the 'most used' tab 
jQuery("#category-tabs li:odd").hide(); 
</script> <?php 
} 
add_action('admin_footer-post.php',  'convert_root_cats_to_radio'); 
add_action('admin_footer-post-new.php', 'convert_root_cats_to_radio'); 

現在需要的是什麼：防止用戶選擇父類別。

在下面顯示的圖像中，例如，您應該能夠選擇除Bandicoot以外的任何內容，因爲Bandicoot是父級（它有子級）。哦，可以選擇Bandicoot的兒童用品。

所以規則應該是：如果你是父母，你不能被選擇，但你的孩子可以。

Answer 1

取決於你的HTML輸出的外觀，你可以把它在以下選項之一：

jQuery("#categorychecklist > li > ul").each(function(){ 
    jQuery(this).parent('li').children('label').children('input').attr('disabled', true); 
}); 

或：

jQuery("#categorychecklist > li > ul").each(function(){ 
    jQuery(this).prev('label').children('input').attr('disabled', true); 
}); 

，甚至更好，刪除收音機：

jQuery("#categorychecklist > li > ul").each(function(){ 
    jQuery(this).prev('label').children('input').remove(); 
}); 

Answer 2

請檢查在腳本代碼中的註釋。

$(function() { 
 
    $('input[type=radio]').on('click', function() { 
 
    //assumes that radio button > wrapped around a label > wrapped around li 
 
    var liObj = $(this).parent().parent(); 
 
    if (liObj != undefined && $(liObj).is('li') && $(liObj).has('ul').length > 0) { 
 
     return false; 
 
    } 
 
    }); 
 
})

ul { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id='test'> 
 
    <li> 
 
    <label> 
 
     <input type='radio' name='cat' />1</label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type='radio' name='cat' />2</label> 
 
    </li> 
 

 
    <li> 
 
    <label> 
 
     <input type='radio' name='cat' />3</label> 
 
    <ul> 
 

 
     <li> 
 
     <label> 
 
      <input type='radio' name='cat' />3-1</label> 
 
     </li> 
 
     <li> 
 
     <label> 
 
      <input type='radio' name='cat' />3-2</label> 
 

 
     <ul id='test'> 
 
      <li> 
 
      <label> 
 
       <input type='radio' name='cat' />3-2-1</label> 
 
      </li> 
 
      <li> 
 
      <label> 
 
       <input type='radio' name='cat' />3-2-2</label> 
 
      </li> 
 
     </ul> 
 

 

 

 
     </li> 
 
    </ul> 
 

 
    </li> 
 

 

 
</ul>