Develop Reference

Enable the click event on checkbox in javascript

When I click on the 1st checkbox, then 2 checkbox is automatically checked and it can not be unchecked if 1st is checked and if 1 is not checked then 2 is checked manually and i am done this code in the javascript
if(firstCheckboxCheckd == true){
secondCheckboxChecked.click = false;
}
else {
secondCheckboxChecked.click = true;
}

I am not sure if I got your question right, but here is my take.
Requirement: -
When user check checkbox 1, it should automatically check checkbox 2
Issue : -
When checking checkbox 1 and automatically checking checkbox 2, checkbox 2 doesnt response anymore
solution below
$(document).ready(function() {
$('#Checkbox1').click(function(){
let firstCheckbox = $('#Checkbox1');
let secondCheckbox = $('#Checkbox2');
if(firstCheckbox.is(":checked"))
{
console.log('firstCheckbox is checked');
secondCheckbox.prop('checked', true);
secondCheckbox.prop('disabled', true);
}
else
{
console.log('secondCheckbox is checked');
secondCheckbox.prop('disabled', false);
}
})
});

Get the certain radio button

have 5 radio button(yes or no) and I want to do is whenever I select 'Yes' either those buttons my textarea will color red, and I've already done that. but the problem is whenever I've select only one 'Yes' and change it to No the color of the textarea still remains on red
$('.com_lease_checkbox').on("change", function() {
console.log($(this).val());
$(".com_lease_checkbox:checked").each(function(){
// Check if the value is Yes
if ($(this).is(':checked') && $(this).val() == 'Yes') {
// Set the color of text-area
$('.com_lease_desc_a').css("border-color","red");
}
});
});

Simple way to do this is to Count How many selected 'No's .. if it's Zero it's OK else Red
$('.com_lease_checkbox').on("change", function() {
//var selectedYesCheckBoxesCount = $(".com_lease_checkbox[value='Yes']:selected").length;
var selectedNoCheckBoxesCount = $(".com_lease_checkbox[value='No']:selected").length;
if(selectedNoCheckBoxesCount > 0) {
$('.com_lease_desc_a').css("border-color","red");
}
else {
$('.com_lease_desc_a').css("border-color","green");
}
});

input with plus and minus button

I've created the input box with plus and minus button, to increase and decrease the value of input box while clicking the button.
I'm adding attribute 'disabled' to minus button when input value is set to zero, but the problem is that when page loads the input has value zero by-default but i need to click the minus button one time to add the attribute 'disabled' which is not i'm looking for, what i want is when the value of input is zero, i want minus button to have attribute set to be disabled by default and when i click the plus button it'll remove the 'disabled' attribute form minus button.
Even i tried adding attribute on button with window load but with no luck like this:
$( window ).load(function() {
$('.minus').attr('disabled', true)
})
Here's the jsFiddle link for the same.
Hope you understand this.
Thanks in advance for the help.

Just add the disabled property on the input
<button disabled class="change_qty minus cursor_hover">-</button>

Here is the working code for you. I just added a function which gets called on document.ready and on every click of + or - sign:
$(".plus").click(function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.siblings('input');
var value = parseInt($input.val());
if (value < 30) {
value = value + 1;
} else {
value = 30;
}
$input.val(value);
checkAndDisable();
});
$(".minus").click(function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.siblings('input');
var value = parseInt($input.val());
if (value > 1) {
value = value - 1;
$(this).removeAttr('disabled');
} else {
value = 0;
$(this).attr('disabled', true);
}
$input.val(value);
checkAndDisable();
});
$(document).ready(function() {
checkAndDisable();
});
$("#inputField").on('change', function(){
if($(this).val() <= 0)
$(this).val(0);
checkAndDisable();
});
function checkAndDisable() {
$(".minus").removeAttr('disabled');
if ($("#inputField").val() == 0) {
$(".minus").attr('disabled', true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="change_qty minus cursor_hover">-</button>
<input type="number" style="height:26px;width:40px;text-align:center;" value="0" id="inputField">
<button class="change_qty plus cursor_hover">+</button>

use document.ready to disable the button as
$(document ).ready(function() {
$('.minus').attr('disabled', 'disabled')
})

jQuery problems with function

What i'm trying to do here is if the selection is equal to value 10 the click function to be available only if selection is equal to 10. But when i change to other ex. category with different value the radio click function is still available. ?
I have 6 radio boxes with value 1,2,3,4,5,6 so what i want to do if value == 4 to slidedown another div while i'm in category with value 10.(selection).
How can i fix this problem ? Here is my sample code.
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
if(selection == '10'){
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown'+selection).slideUp();
} else {
$('#slidedown'+selection).slideDown();
}
});
});
Thanks, any help will be appreciated.
EDIT : I want to slideUp the currect div which is slided down by the category value if radio box with value 4 is checked.

You should have another selection var inside the click callback:
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
});
$("input:radio[name='checkbox']").click(function() {
var selection = $('#category').val(); //This does the trick
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Also, callbacks must be separated for not binding a new listener each time
Hope this helps. Cheers

Use the disabled property to enable and disable the radio buttons.
$('#category').change(function() {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
$('input:radio[name=checkbox]').prop('disabled', selection != '10');
});
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Your code is adding a handler when the select has the correct value, but it never removes the handler when the select changes to a different value. Also, every time they select 10 it was adding another handler, so the handler would then run multiple times.

limit checkbox and uncheck after changing tab

I am trying to show and hide divs with select tag. In the divs there are check boxes which has a logic of disabling them after the user checked 2. When I am changing the divs the checkboxes are staying disabled. For some reason the max 2 checkbox logic is disabling all the checkboxes.
Here is the fiddle
http://jsfiddle.net/sghoush1/yJCYW/
The Jquery looks somewhat like this
$('.selectOption').change(function(){
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
var max = 2;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if(current >= max){
$('.resourceMsg').show();
} else{
$('.resourceMsg').hide();
}
});

Just uncheck the checkboxes and set the disabled property to false whenever the select element is changed:
$(function () {
var max = 2;
var checkboxes = $('input[type="checkbox"]');
$('.selectOption').change(function () {
checkboxes.prop({
'disabled': false,
'checked': false
});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
checkboxes.change(function () {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
if (current >= max) {
$('.resourceMsg').show();
} else {
$('.resourceMsg').hide();
}
});
});
jsFiddle example

You have no code to enable them.
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
This will disable all unchecked checkboxes on the page, and not just those in the currently displayed div.
You need to reconsider what should occur upon the selection change; you either need to throw away existing selections or re-enable checkboxes (effectively the same thing):
$('.selectOption').change(function(){
$('.descContent').find(':checked,:disabled').prop({checked: false, disabled: false});
$('.descContent').hide().eq(this.selectedIndex).show();
$('.resourceMsg').hide();
});
Alternatively, you could just disable the checkboxes in the current div.
checkboxes.change(function() {
var content = $(this).parents('.descContent');
var current = content.find(':checked').length;
content.find(':not(:checked)').prop('disabled', current >= max);
// ...
}