I am having trouble with my code, I was able to implement it using code behind but it was not good as I have sliding panel (using jQuery) which were interfered with on post back.
The CheckBoxList is disabled by default with no auto postback.
I want the CheckBoxList to become enables if the CheckBox is checked.
Currently, I have this code:
$("#BizAppsCheckBox").click(function () {
if (this.checked)
$('#BizAppsCheckBoxList').removeAttr('disabled');
else
$('#BizAppsCheckBoxList').attr('disabled', 'disabled');
});
How can I fix this issue?
Best working solution for me, thanks to the answers:
$(document).ready(function () {
if ($("#BizAppsCheckBox").prop('checked') == false) {
$('#BizAppsCheckBoxList *').prop('disabled', true);
}
else {
$('#BizAppsCheckBoxList *').prop('disabled', false);
}
$("#BizAppsCheckBox").click(function () {
if (this.checked)
$('#BizAppsCheckBoxList *').prop('disabled', false);
else
$('#BizAppsCheckBoxList *').prop('disabled', true) &
$('#BizAppsCheckBoxList *').prop('checked', false);
});
});
Try this :
You should use the ClientID cuz asp.net does provide different ID ( when under container)
$("#<%=BizAppsCheckBox.ClientID%> ").click(function () {
if (this.checked)
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',false);
else
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled', true);
});
edit
$("#<%=BizAppsCheckBox.ClientID%>").click(function () {
if (this.checked)
$('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', false);
else
$('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', true);
});
Use prop instead of attr, if ClientIDMode is not static then use ClientID of server controls
$("#<%= BizAppsCheckBox.ClientID %>").click(function () {
if (this.checked)
$('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', true);
else
$('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', false);
});
this will do the trick
$("#<%=BizAppsCheckBox.ClientID%>").click(function () {
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});
or
$("#BizAppsCheckBox").click(function () {
$('#BizAppsCheckBoxList').prop('disabled', !this.checked);
});
try using .on()
$("document").on("click","#<%=BizAppsCheckBox.ClientID%>",function(){
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});
Related
How to run javascript code if checkbox is checked?
checkbox is defined as
<input type="checkbox" id="Maksja_piiratudes" name="Maksja_piiratudes"
onfocus="if(typeof this.ischanged=='undefined') this.ischanged=false" onblur="summarefresh()" onclick="dataChanged(this)">
I tried
$(function () {
$("#Maksja_piiratudes").on("change", function() {
alert('checkbox is checked');
}); // end on change
}); // end $
But this runs also if checkbox is unchecked.
How to run code only if checkgox is selected ?
Bootstrap 3, jquery, jquery UI are used.
You can use the checked property of an checkbox input.
$(function()
{
$('#Maksja_piiratudes').on('change', function()
{
if (this.checked)
{
alert('checkbox is checked');
}
});
});
Edit:
I prefer the vanilla style more.. so just in case someone needs it:
document.querySelector('#Maksja_piiratudes')
.addEventListener('change', function()
{
if (this.checked)
{
alert('checkbox is checked!');
}
}, false);
Try This
$(function () {
$("#Maksja_piiratudes").on("change", function() {
if ($(this).prop("checked") == true) {
alert('checkbox is checked');
} //end if
}); // end on change
}); // end $
If you want to make it global for all checkboxes use the below:
$(function () {
$("input[type='checkbox']").on("change", function() {
if ($(this).prop("checked") == true) {
alert('checkbox is checked');
} //end if
else {
alert('checkbox is unchecked');
}
}); // end on change
}); // end $
I have a question that is quite confusing.
Everytime I check a "checkbox", it gets the closest "div" and add the class "hilight" and "marked" and set an Item to LocalStorage called "marking".
When I switch from div 1 to 2, I remove the class "hilight", but i keep the class "marked".
I'm trying to get the LocalStorage, and add class "hilight" again to divs that has "marked"
JS Fiddle: http://jsfiddle.net/b4KgV/
HTML
1
2
<button class="1st">show 1st</button>
<button class="2nd">show 2nd</button>
JS
localStorage.clear();
$(document).on('click', ':checkbox', function () {
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem("marking","yes");
}
else {
$(this).closest("div").removeClass('hilight marked');
}
});
$(".1st").on('click', function() {
$(".second").css('display','none');
$(".second").removeClass('hilight');
$(".first").css('display','block');
});
$(".2nd").on('click', function() {
$(".first").css('display','none');
$(".first").removeClass('hilight');
$(".second").css('display','block');
});
if (localStorage.getItem("marking")) {
$(".marked").closest("div").addClass('hilight');
};
Thx.
Localstorage goes by key:value as you know, I tried to keep them separate.
Try this fiddle
http://jsfiddle.net/b4KgV/11/
$(document).on('click', ':checkbox', function () {
var div = $(this).closest("div").attr("id")
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem(div, true);
} else {
$(this).closest("div").removeClass('hilight marked');
localStorage.setItem(div, false);
}
});
$(".1st").on('click', function () {
console.log("test")
if (localStorage.getItem("firstDiv") == "true") {
$(".first").closest("div").addClass('hilight');
};
$(".second").css('display', 'none');
$(".second").removeClass('hilight');
$(".first").css('display', 'block');
});
i have jquery for disable buttons
if check box checked then button enabled
document.getElementById('disabler').onchange = function() {
if ($(disabler).is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
}
});
there is many checkbox but this code work only for first check box only !
Use this:
$(document).on("change", "<selector for disablers>", function() {
if (this.checked) {
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css('cursor', 'not-allowed');
}
});
<selector for disablers> should probably be a class (.disabler) rather than id, since you said you have many of them.
there is many checkbox but this code work only for first check box only !
IDs must be unique.. You should class instead.
Example of using class selector
$('.disabler').change(function () {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});
Try use only jQuery:
$('#disabler').change(function() {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});
Try this:
$("#disabler").change(function(){
if ($("#disabler").is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
}
else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
});
I agree, you are already using jQuery, so use it.
However, and in addition, you are calling the jQuery object far too many times. If you are parsing through to get the jQuery object more than once, then you should create local variables.
Second, you might consider using the power of closures for things like this:
function wireDisabler() {
// closures
var $cbxDisabler = $('#disabler');
var $btnSubmit = $("#signin_submit");
var fOnChange = function() {
var bChecked = $cbxDisabler.is(':checked');
$btnSubmit.prop('disabled', !bChecked)
.css('cursor', (bChecked ? 'pointer' : 'not-allowed'));
};
// handle event
$cbxDisabler.change(fOnChange);
}
if you have more than one disabler in you page, firstly you should use class attribute instead of ID, then easily do this:
$(document).on("change", ".disabler", function(){
//your stuff
});
ID attribute is used as a unique identifier.
check this working DEMO;
Why does my check all button work once and doesn't work at 3rd click.
the check all button only works at firts click. I check the dom and its updating but the view does. What is the cause of the problem?
FIDDLE
jQuery('.sp_country').click(function () {
var checkbox = $(this).find(":checkbox"),
checked = checkbox.is(":checked");
checkbox.prop("checked", !checked);
});
jQuery('.sp_country input:checkbox').on('click', function (e) {
e.stopImmediatePropagation();
var checked = (e.currentTarget.checked) ? false : true;
e.currentTarget.checked = (checked) ? false : checked.toString();
});
jQuery('#bt_checkbox').click(function (e) {
e.stopImmediatePropagation();
if (jQuery(this).val() === 'Uncheck All') {
jQuery('#country input:checkbox').removeAttr('checked');
jQuery(this).val('Check All');
} else {
jQuery('#country input:checkbox').attr('checked', 'checked');
jQuery(this).val('Uncheck All');
}
});
fiddle Demo
Change
jQuery('#country input:checkbox').attr('checked', 'checked');
to
jQuery('#country input:checkbox').prop('checked', true);
Use .prop()
Read .prop() vs .attr()
I have a checkbox list which contains 6 checkboxes. A corresponding radio button is placed beside each checkbox. When page load, the radio buttons are disabled. When I check the checkbox, I want to enable the radio button beside it. Furthermore, if I uncheck the checkboxes, the radio button beside it will be deselected and disabled again.
The checkbox is for the user to choose items they want, and the radio button is for the user to pick his favourite item.
I have tried this code below but it is not working...
$(document).ready(function () {
$("#rbtnlLeadAgencies input[type='radio']").each(function () {
$("#rbtnlLeadAgencies input[type='radio']").prop('disabled', true);
});
$("#cbxlAgencies input[type='checkbox']").each.change(function () {
if ($("#cbxlAgencies_0 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_0 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_1 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_1 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_2 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_2 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_3 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_3 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_4 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_4 input[type='radio']").prop('disabled', false);
if ($("#cbxlAgencies_5 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_5 input[type='radio']").prop('disabled', false);
});
});
The markups and jQuery code are on jsfiddle
Any ideas of achieving this behavior?
Thanks in advance!
Try
$(document).ready(function () {
$("#rbtnlLeadAgencies input[type='radio']").prop('disabled', true);
$("#cbxlAgencies input[type='checkbox']").change(function () {
var idx = $(this).closest('tr').index();
var radios = $("#rbtnlLeadAgencies tr").eq(idx).find('input[type="radio"]').prop('disabled', !this.checked);
if(!this.checked){
radios.prop('checked', false);
}
});
});
Demo: Fiddle
DEMO
$(document).ready(function () {
$('input:radio[id^="rbtnlLeadAgencies_"]').prop('disabled', true);
$('input:checkbox[id^="cbxlAgencies"]').change(function () {
var id = this.id.replace('cbxlAgencies_', '');
$("#rbtnlLeadAgencies_" + id).prop('disabled', !this.checked);
});
});
^ attribute-starts-with-selector
As I said in my comment here is the solution which is a bit expensive in markup but more generic :
HTML
<input id="cbxlAgencies_0" data-for-radio="rbtnlLeadAgencies_0" type="checkbox"/>
JS
$(document).ready(function () {
$("input[type='checkbox'][data-for-radio]").change(function () {
$('#' + $(this).data('for-radio')).prop('disabled', !this.checked);
}).change();
});
http://jsfiddle.net/techunter/7M54h/
Try jsfiddle code.
$(document).ready(function () {
$("#rbtnlLeadAgencies input[type='radio']").attr('disabled', true);
$("#cbxlAgencies input[type='checkbox']").change(function () {
$("#rbtnlLeadAgencies_0").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_1").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_2").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_3").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_4").prop('disabled', !this.checked);
$("#rbtnlLeadAgencies_5").prop('disabled', !this.checked);
});
});