Prevent parent category radio button from being clicked

Question

I've got this function/script that converts the checkboxes into radio buttons (in the Categories metabox), but I need to extend the functionality a little but I'm unsure how to go about it.

The script:

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' );

What is needed now: to prevent users from selecting a parent category.

In the image shown below for example, you should be able to select anything except Bandicoot, because Bandicoot is a parent (it has children). Oh and the children items for Bandicoot are allowed to be selected.

So the rule should be: if you're a parent you can't be selected, but your children can.

Answer 1

Depends on how your output html looks you can make it in one of below options:

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

or:

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

or even better, remove radio:

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

Answer 2

Please check the comment in the script code.

 $(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>