We Keep Coding

.is(":checked") doesn't work in jQuery

I'm new to jQuery and I need to check if the checkbox is checked. In other posts I saw that I need to use .is(":checked") to solve it, but somehow it doesn't work.
$('.neutral').on('click', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />
In this code I have 2 problems and I don't know how to solve it.
When I'm using console.log('checked') outside of the if statement (after checkbox variable) and I click on the checkbox one time, console prints the result 2 times.
I don't know why this if statement doesn't working.
Thank you for your time and help.

checked happens after the change event,just replace click with change.
$('.neutral').on('change', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />

I have seen your code, I think you should try
$(document).on("click",".neutral",function() {
// Write code here
});
Instead of your code, Replace this code to as i written
$('.neutral').on('click', function() {
// Code here
});
For more undesirability see here
$(document).ready(function() {
// This WILL work because we are listening on the 'document',
// for a click on an element with an ID of #test-element
$(document).on("click","#test-element",function() {
alert("click bound to document listening for #test-element");
});
// This will NOT work because there is no '#test-element' ... yet
$("#test-element").on("click",function() {
alert("click bound directly to #test-element");
});
// Create the dynamic element '#test-element'
$('body').append('<div id="test-element">Click mee</div>');
});
Visit these link that may help you more for your implementation
Statck over flow link
jsFiddle Link

How to hide/unhide div using javascript? [duplicate]

This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 6 years ago.
I have a Checkbox in my index.html file as
#Html.CheckBoxFor(m=>m.isChecked, new { id = "isChecked" })
<div id='Shipping'>
<p> Some textboxes here </p>
</div>
I would like to hide the sipping div if the checkbox is checked and unhide if not checked. And i would like it to be dynamic. How do i do that?

I guess you'd first bind to the check box's change event:
$('#isChecked').change(function() {
//...
});
Within that event handler, you'd then show/hide the div based on the state of the check box. Possibly something like this:
if ($(this).is(':checked')) {
$('#Shipping').show();
} else {
$('#Shipping').hide();
}
Of course, you'll also want to set an initial value. A simple way to accomplish both would likely be to wrap the logic in a function:
var toggleDiv = function () {
if ($('#isChecked').is(':checked')) {
$('#Shipping').show();
} else {
$('#Shipping').hide();
}
}
Then call it from the event handler above:
$('#isChecked').change(toggleDiv);
And also when the page loads:
toggleDiv();

You just need to bind a change event to the checkbox and check it's :checked selector to determine if the div needs to shown or hidden.
<script>
$().ready(function(){
$('#isChecked').change(function()
{
$(this).is(":checked") ? $("#Shipping").show() : $("#Shipping").hide();
}).change(); // optional
});
</script>

javascript:
$('#isChecked').change(function(){
if($(this).is(":checked")) {
$(this).removeClass("hide");
} else {
$(this).addClass("hide");
}
});
css:
.hide{ display:none;}
HTML:
<div id='Shipping' class='hide'> </div>

$('#isChecked').change(function(){
if($(this).is(":checked")) {
$("#Shipping").hide()
} else {
$("#Shipping").show()
}
});

How to disable an element on the page with jQuery or Javascript [duplicate]

This question already has answers here:
Disable/enable an input with jQuery?
(19 answers)
Closed 8 years ago.
$('img').click(function () {
$("#shikh_sec").attr("disabled", true); // doesn't work :/
}
so , how to fix this and disable that element when clicking on the "img" tag

Assuming #shikh_sec is an input that can be disabled (there's no such thing as a disabled p element, etc.), you want prop():
$('#shikh_sec').prop('disabled', true);

The code is missing a trailing ");"
A correct version would be something like this
$('#disable-me').click(function () {
$(this).attr("disabled", true); // doesn't work :/
});
JSFiddle: http://jsfiddle.net/5v4mysgt/

Try using disabled instead of true:
$('img').click(function () {
$("#shikh_sec").attr("disabled", "disabled");
}
http://jsfiddle.net/yhfnzjuq/
$(function(){
$('img').click(function () {
$("#shikh_sec").attr("disabled", "disabled");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://ichef.bbci.co.uk/news/ws/200/amz/worldservice/live/assets/images/2014/09/23/140923115528_ultima_hora_640x360_bbc_nocredit.jpg">
<input id="shikh_sec" type="button" value="OK">

Or just with a pure javascript:
$('img').click(function () {
document.getElementById("shikh_sec").disabled = true;
});

disable a CheckBox depending on dropdownlist

I'm working on a asp.net mvc3 application with DropDownLists and CheckBoxes and so on.
I wrote a javascript to disable a CheckBox if a defined option of a dropdownlist is selected:
$(function() {
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$('#checkboxId').attr('disabled', disabled);
} else {
$('#checkboxId').removeAttr('disabled', disabled);
}
});
});
this works fine, but the script reacts only on a change of the dropdownlist
so if '1st option' is on the top of the dropdownlist and so automatically selected as default, the script doesn't disable the checkbox. Only if the user select another option and select '1st option' once again...
Please help me :)
PS: the script also doesn't work if I use my keyboard to switch the dropdownlist options instead of my mouse
So it would be very kind if you could help my to improve the script, because I really can't do javascript :/

$(function() {
var $cb = $('#checkboxId');
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$cb.prop('disabled', true);
} else {
$cb.prop('disabled', false);
}
}).trigger('change');
});
The difference in triggering change event after adding halnderl. About your second question - Using keyboard the 'change' event will be triggered when select will lose focus ('blur').

You could do something like this:
function setCheckBox() {
if (this.value == '1st option') {
$('#checkboxId').attr('disabled', disabled);
} else {
$('#checkboxId').removeAttr('disabled', disabled);
}
}
$(function() {
setCheckBox();//do this on load..
$('#dropdownlistId').change(function() {
setCheckBox();//and on change
});
});

When you define your CheckBox control, use disabled attribute to disable it by default. That way it will be disabled already and there is no need to add more javascript to disable it from the get go.
It would look something like this:
#Html.CheckBoxFor(model => model.IsCheckBox, new { #disabled = "true" })

$(function() {
var $cb = $('#checkboxId');
$('#dropdownlistId').change(function() {
if (this.value == '1st option') {
$cb.attr('disabled', disabled);
} else {
$cb.removeAttr('disabled', disabled);
}
}).trigger('change');
});
works like a charm now
thank you guys

Your code seems to be little incorrect depends on your need because your calling the disable function on change of that dropdown list you need to write it in document.ready like this
$(document).ready(function () {if(document.getElementById("dropdownlistId").value="1stoption")
{
document.getElementById('checkboxId').style.visibility = 'hidden';
}
else
{//do something whatever you wish here in else condition
}
}
Hope it helps!!!

control a checkbox via an IMG using jquery

I want to control the checked state of a checkbox when a user clicks on an image with the class of ".latinAmerica" within the page. Each click should check/uncheck it each time.
I've tried a ton of different methods but I can't find anything suitable for checkboxes.
EG:
$('.latinAmerica').click(function () {
if($('input:checkbox[name=theName]:nth(0)').is(':checked')) {
$('input:checkbox[name=theName]:nth(0)').attr('checked',true);
} else {
$('input:checkbox[name=theName]:nth(0)').attr('checked',false);
}
});
or
$('.latinAmerica').click(function () {
$("input:checkbox[name=theName]:nth(0)").prop("checked", true);
});
I did get this method working with radio buttons:
$('.latinAmerica').click(function () {
$('input:checkbox[name=theName]:nth(0)').attr('checked',true);
});
But no luck with checkboxes.
What am I doing wrong :(
Thanks.

$(function() {
$(".latinamerica").click(function() {
var cb = $("input[name='theName']");
if(cb.is(":checked")) {
cb.prop("checked", "");
} else {
cb.prop("checked", "checked");
}
});
});
Fiddle: http://jsfiddle.net/JFDxj/

The if condition is wrong so it must not doing anything i.e. checkedbox is checked when it is already checked and unchecked when it is already unchecked.
$('.latinAmerica').click(function () {
if($('input:checkbox[name=theName]:nth(0)').is(':checked')) {
$('input:checkbox[name=theName]:nth(0)').attr('checked',false);
} else {
$('input:checkbox[name=theName]:nth(0)').attr('checked',true);
}
});