We Keep Coding

Prevent parent category radio button from being clicked

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.

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();
});

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>

jQuery get only first id value from the loop

My code is:
<input id='edit' type='checkbox' />
while($rs = mysql_fetch_array($query_fetch))
{
echo "
<input type='text' name='qty' id='qty' value='".$sum[0]."' disabled>
";
}
<script>
document.getElementById('edit').onchange = function() {
document.getElementById('qty').disabled = !this.checked;
};
</script>
The problem is that when check the checkbox only the first row of the loop is effected. I want when checkbox is checked all input to be enabled.

To do this in jQuery, change:
<input type='text' name='qty' id='qty' value='".$sum[0]."' disabled>
To:
<input type='text' name='qty' class='qty' value='".$sum[0]."' disabled>
And add the following code:
$('#edit').click(function() {
if ($(this).prop('checked')) {
$('.qty').prop('disabled', false);
} else {
$('.qty').prop('disabled', true);
}
});
Note: DOM object IDs should be unique. No two elements should have the same ID. You can assign the same class to multiple elements and identify them in javascript that way. Also, if these input elements are form elements you plan to process server side, you will need to name them differently or only the last value assigned will be available.

First thing You don't use id for that much elements... id is unique for each element...
here you can use class = qty .
you can get class values using jquery
$('.qty').eq(0).val();
still if you want to use id then you can concatenate any counter variable (i) to id
echo "
<input type='text' name='qty"+i+"' id='qty' value='".$sum[0]."' disabled>
";

To do this in jQuery:
add class entry to the text fields:
<input type='text' class='qty' name='qty' id='qty' value='".$sum[0]."' disabled>
and then use the jquery
$( "#edit" ).click(function() {
$( ".qty" ).each(function( index ) {
if ($("#edit").is(':checked')) {
$( this ).prop('disabled', false);
} else {
$( this ).prop('disabled', true);
}
});
});

how to set selected li value to input with jquery

I don't know how to use jquery the get the result:
click the li will add select class and remove others selected li
set the select li datavalue to input(id:sizevalue)
make sure the li list should be selected one when click submit button
<form name="form">
<style>
#sizelist ul{list-style-type:none;}
#sizelist ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}
#sizelist ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}
#sizelist ul li a:hover{border:2px solid #FF6701;margin:0px;}
#sizelist .select a{border:2px solid #FF6701;margin:0px;}
</style>
<ul id="sizelist">
<li datavalue="S">S</li>
<li datavalue="M">M</li>
<li datavalue="L">L</li>
<li datavalue="XL">XL</li>
</ul>
<input id="sizevalue" size="15" name="size" type="text" />
<input type="button" value="submit"/>
</form>
plz help

Try this one:
HTML
<ul id="sizelist">
<li>S</li>
<li>M</li>
<li>L</li>
<li>XL</li>
</ul>
<input id="sizevalue" size="15" name="size" type="text" />
jQuery
$('#sizelist a').on('click', function(e) {
e.preventDefault();
// This removes the class on selected li's
$("#sizelist li").removeClass("select");
// adds 'select' class to the parent li of the clicked element
// 'this' here refers to the clicked a element
$(this).closest('li').addClass('select');
// sets the input field's value to the data value of the clicked a element
$('#sizevalue').val($(this).data('value'));
});
Take note of the changes that I made:
-- replaced datavalue with data-value so as to be able to use .data() method of jQuery
-- transferred the data-value attributes to the a elements because they're the ones who actually gets clicked
-- replaced the javascript:void(0) in the href because it just does not do anything

The following will achieve want you want:
HTML
<form name="size-form">
<ul id="sizelist">
<li data-value="S">S</li>
<li data-value="M">M</li>
<li data-value="L">L</li>
<li data-value="XL">XL</li>
</ul>
<input id="sizevalue" size="15" name="size" type="text" />
<input type="submit" value="submit"/>
</form>
JavaScript
$("#sizelist").on("click", "a", function(e){
e.preventDefault();
var $this = $(this).parent();
$this.addClass("select").siblings().removeClass("select");
$("#sizevalue").val($this.data("value"));
})
$("form[name=size-form]").submit(function(e) {
//do your validation here
if ($(this).find("li.select").length == 0) {
alert( "Please select a size." );
e.preventDefault();
}
});
jsFiddle Demo
You should use the data-* attribute to store the data.

I think this code will work for you:
$('#sizelist a').on('click', function(event) {
// Clear previous selection
$('#sizelist li').removeClass('selected');
// Add selection css class
$(event.target).parent('li').addClass('selected');
// Change value in input
$('#sizevalue').val($(event.target).parent('li').attr('datavalue'));
});
NB. The preferred way of adding additional attributes in HTML is to prefix them with data-.

Remove Respective Li from all

Following is my fiddle in which when user click on all delete then on foreach for LI function. I want to remove those lis which contains name like abc,def,ghk in their input field . I just want to know how to check that the active li on foreach loop contains the certain value that matches it input field value or not so i'll stop to remove it.
Fiddle: http://jsfiddle.net/mT5vw/2/
$(document).ready(function () {
$(document).on('click', '.liDelete', function () {
li = $(this).parent();
li.remove();
});
$("#butadd").click(function () {
$("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
});
function alldelete() {
$('#folder li').each(function (e) {});
}

If you want to remove the li that the input contains a value like ABC try:
$('#removeAll').click(function(){
$('#folder li input[type="text"]').each(function () {
if ($(this).val() === "abc") {
$(this).parent().remove();
}
});
here the jsfiddle only write abc in the input and before press remove all.

I've edited your fiddle: http://jsfiddle.net/mT5vw/3/
If this is what you what it can be achieved by, removing all elements from the tag and then reinserting one empty row.
js:
$(document).ready(function () {
$(document).on('click', '.liDelete',function() {
li = $(this).parent();
li.remove();
});
$("#butadd").click(function () {
$("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
$("#deleteall").click(function(){
$('#folder').html("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
});

add remove <li with textbox on button click. (out of ul wrap problem) and name inputs uniquely

I have an issue with js. I have form like below. Add button is adding li with input box and Remove button is removing... it is working very well. the issue is, it is creating the li after ul, out of ul :/ you can see it clearly at the screenshot below. any idea about solution? appreciate!!! thanks!!!
*
ps, how can I name the created inputs
unique? now all has same name which is
txt :/
*
JS CODE
function addTextBox() {
var form = document.contact;
form.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";
}
HTML CODE:
<li id="persons_add"><label for="persons"># of Persons Attending: *</label>
<table width="40%" border="1">
<tr>
<td><input type="text" name="count" value="0" class="txt_input required" style="width:20px;" readonly ></td>
<td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
<td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>
</tr>
</table>
</li>
<li class="alignRight"><input type="submit" value="Register" id="btnsend" name="btnsend" class="btn_submit" /></li>
</ul>
SCREENSHOT of issue
alt text http://xs1144.xs.to/xs1144/09434/buuu851.jpg

You need to append the new li to the ul, not the form element.
var ul = document.getElementById("ul_id");
ul.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";

Shouldn't you to append the "li" to the "ul" instead of the form ?
function addTextBox() {
var myUl = document.getElementById('`___your_ul_id____`'); **<--- change this**
myUl.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";
}

Call appendChild on the UL element, not the form element.