We Keep Coding

.prop('checked', false) doesn't uncheck radio button after clicking on a label

$(".label").click(function(){
var id = $("#uncheck");
var value = id.val();
if(value == 'unchecked'){
id.val('checked');
} else {
id.val('unchecked');
id.prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='label' for='uncheck'>uncheck</label>
<input class='input' type='radio' id='uncheck' value='unchecked'>
I keep trying to uncheck the radio button but it won't work,

You should prevent the default action (label is setting the radio back). You can do it by returning false from your event handler:
$(".label").click(function(){
var id = $("#uncheck");
if(!!id.prop('checked')) {
id.prop('checked', false);
return false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='label' for='uncheck'>uncheck</label>
<input class='input' type='radio' id='uncheck' value='unchecked'>
Or using event.preventDefault() method:
$(".label").click(function(e){
var id = $("#uncheck");
var value = id.val();
if(value == 'unchecked'){
id.val('checked');
} else {
e.preventDefault();
id.val('unchecked');
id.prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='label' for='uncheck'>uncheck</label>
<input class='input' type='radio' id='uncheck' value='unchecked'>

How to make minimum two inputs of a form required in JavaScript?

I have a form with 3 inputs of type text. I need on submit of that form to make a validation with required fields. I need the user to complete only two inputs of that form, no mather which one of them, and then submit the form. How would I make this? I don't get the logic here.
My code:
$('#submit-btn').on('click', function(e){
e.preventDefault();
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
if(input1 == '' || input2 == ''){
alert('you have to complete only 2 fields')
}else{
$('#form').submit();
}
});
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='text' value='' id='submit-btn'>
</form>

You can use each to iterate through all inputs and check how many inputs have value like following.
$('#submit-btn').on('click', function (e) {
e.preventDefault();
var count = 0;
$('input[type=text]').each(function () {
if (this.value != '') count++;
// use this.value.trim() to prevent empty value
});
if (count<2) {
alert('you have to complete only 2 fields')
} else {
$('#form').submit();
}
});

You can filter out the input element only for empty textbox by using .filter() like following code :
$('#submit-btn').on('click', function(e) {
// credited to : http://stackoverflow.com/questions/1299424/selecting-empty-text-input-using-jquery
var a = $('#form').find(":text").filter(function(){ return $(this).val() == "" });
if (a.length >= 2) {
alert('you have to complete only 2 fields')
} else {
$('#form').submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='button' value='Submit' id='submit-btn'>
</form>

Just +1 the textboxes which has a value.
$('#submit-btn').on('click', function(e) {
e.preventDefault();
var inputs = $('#input1').val().length > 0 ? 1 : 0;
inputs += $('#input2').val().length > 0 ? 1 : 0;
inputs += $('#input3').val().length > 0 ? 1 : 0;
if (inputs != 2) {
alert('you have to complete only 2 fields')
} else {
$('#form').submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='submit' value='submit' id='submit-btn'>
</form>

This should do what you want.
function validateSubmit(){
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
var cnt = 0;
if(input1 != '') cnt++;
if(input2 != '') cnt++;
if(input3 != '') cnt++;
if(cnt < 2){
alert('you have to complete only 2 fields');
return false;
}else{
return true;
}
});
<form action='' method='post' id='form'>
<input type='text' value='' name='input1' id='input1'>
<input type='text' value='' name='input2' id='input2'>
<input type='text' value='' name='input3' id='input3'>
<input type='text' value='' id='submit-btn' onclick="return validateSubmit();">
</form>

$('#submit-btn').on('click', function(e){
e.preventDefault();
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
if((input1 != '' && input2 != '') || (input2 != '' && input3 != '') || (input1 != '' && input3 != '')){
$('#form').submit();
}else{
alert('you have to complete only 2 fields')
}
});

Disable input fields in Bootstrap

I am having 3 input fields in Bootstrap, if any one of the input field is filled, I want to disable other two.
Lets say I am having A,B,C input boxes.
If A is filled then B & C will become disabled or readonly and vice versa.
Also if I delete value from A then B & C again become enabled. As B & C was also not filled.

You simply do a jQuery function
// #your_filled_input is for the id of the input
$("#your_filled_input").keyup(function() {
if ($("#your_filled_input").val().length >= 0) {
$("#your_first_other_field" ).attr('disabled', 'disabled');
$("#your_second_other_field").attr('disabled', 'disabled');
}
});

$("#fieldA").keyup(function() {
if ($("#fieldA").val().length > 0) {
$("#fieldB").attr('disabled', 'disabled');
$("#fieldC").attr('disabled', 'disabled');
} else {
$('#fieldB').removeAttr('disabled');
$('#fieldC').removeAttr('disabled');
}
});
$("#fieldB").keyup(function() {
if ($("#fieldB").val().length > 0) {
$("#fieldA").attr('disabled', 'disabled');
$("#fieldC").attr('disabled', 'disabled');
} else {
$('#fieldA').removeAttr('disabled');
$('#fieldC').removeAttr('disabled');
}
});
$("#fieldC").keyup(function() {
if ($("#fieldC").val().length > 0) {
$("#fieldB").attr('disabled', 'disabled');
$("#fieldA").attr('disabled', 'disabled');
} else {
$('#fieldB').removeAttr('disabled');
$('#fieldA').removeAttr('disabled');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='fieldA' />
<input type='text' id='fieldB' />
<input type='text' id='fieldC' />

JSFIDDLE
The input fields
<input type='text' id='a' class="inputfield" disabled="false" />
<input type='text' id='b' class="inputfield" disabled="false" />
<input type='text' id='c' class="inputfield" disabled="false" />
The jQuery code
$(document).ready(function(){
$('.inputfield').prop('disabled', false);
$('.inputfield').change(function(){
var a = $('#a').val();
var b = $('#b').val();
var c = $('#c').val();
if((a).length > 0){
$('#b').prop('disabled', true);
$('#c').prop('disabled', true);
}
if((b).length > 0){
$('#a').prop('disabled', true);
$('#c').prop('disabled', true);
}
if((c).length > 0){
$('#a').prop('disabled', true);
$('#b').prop('disabled', true);
}
});
});

You can use this :
<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>
With this JS
$('.singleedit').keyup(function() {
$(this).removeAttr('readonly');
$('.singleedit').not(this).each(function(){
$(this).val('').attr('readonly','readonly');
});
})

How to show an alert if all checkboxes aren't checked?

I want alert if check-box is not checked (- this is working )
and
Alert if ALL check-box is not checked ( need help in this )
CheckBox :
<input type="checkbox" value="1" id="data" name="data[]">
<input type="checkbox" value="2" id="data" name="data[]">
<input type="checkbox" value="3" id="data" name="data[]">
Button :
<input name=\"submitclose\" type=\"submit\" value=\"Close\" id=\"submitclose\">
Below is my Jquery :
echo "<script>
jQuery(function($) {
$(\"input[id='submitclose']\").click(function() {
var count_checked = $(\"[id='data']:checked\").length;
if (count_checked == 0) {
alert(\"Please select a Packet(s) to Close.\");
return false;
} else{
return confirm(\"Are you sure you want to Close these Packet?\");
}
});
});
</script>";

Try,
HTML:
<input type="checkbox" value="1" id="data1" name="data[]">
<input type="checkbox" value="2" id="data2" name="data[]">
<input type="checkbox" value="3" id="data3" name="data[]">
JS:
var allCheckBox = $("[id^='data']")
var count_checked = allCheckBox.filter(":checked").length;
if (count_checked == 0) {
alert("All check boxes are not checked");
} else if(count_checked != allCheckBox.length) {
alert("some of the check boxs are not checked");
} else{
return confirm("Are you sure you want to Close these Packet?");
}

$(\"input[id='submitclose']\").click(function(){
var count = 0;
$('input#data').each(function(){
if ($(this).attr('checked') == true){
count++ //if a checkbox is checked the variable count will be greater then 0.
}
})
if (count == 0){ //nothing is checked.
alert("Please check at least one of the checkboxes");
}else{ //something is checked.
//code to execute.
}
})

Jquery change checkbox when clicking other checkbox

I have a list of checkboxes like this:
<input type='checkbox' name='cat' class='parent' value='cat1' />Category 1</input>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 1</input>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 2</input>
<input type='checkbox' name='cat' class='parent' value='cat2' />Category 2</input>
<input type='checkbox' name='foo' class='child' value='3' />SubCategory 3</input>
<input type='checkbox' name='foo' class='child' value='4' />SubCategory 4</input>
I would like to change the 'Category 1' checkbox to checked whenever I click it's subcategories without checking the other categories checkbox.
How can I do that?

Using the data attribute to set the cat. simply get this form the check event of the child elements:
<input type='checkbox' name='cat' class='parent' value='cat1' id="category1" />Category 1</input>
<input type='checkbox' name='foo' class='child' value='1' data-cat="1" />SubCategory 1</input>
<input type='checkbox' name='foo' class='child' value='2' data-cat="1" />SubCategory 2</input>
....
$('.child').change(function() {
var cat = $(this).data('cat');
$('#category' + cat).prop('checked', true);
});

I made a slight change to your markup and wrapped the sets in a div each.
Now my code will uncheck the parent too if all its child-cats are unchecked and when you check the parent, all child cats are checked/unchecked
Live Demo
$(function() {
$(".child").on("click",function() {
$parent = $(this).prevAll(".parent");
if ($(this).is(":checked")) $parent.prop("checked",true);
else {
var len = $(this).parent().find(".child:checked").length;
$parent.prop("checked",len>0);
}
});
$(".parent").on("click",function() {
$(this).parent().find(".child").prop("checked",this.checked);
});
});

You can id the subCategories as cat2_1, cat2_2 etc and then access the category element by means of the subcategory element by splitting the id by _ to obtain the category id.

Other answer
$(document).ready(function () {
$("INPUT").click(function () {
if ($(this).attr("class") == "parent") {
var v = this.value;
var check = this.checked;
var ok = false;
$("INPUT").each(function () {
if (v == this.value) {
ok = true;
} else {
if (this.name=="cat") ok = false;
else if (ok && this.name == "foo") {
this.checked=check;
}
}
});
}
});
});