We Keep Coding

How to switch (on/off) the behavior while the checkbox is checked/unchecked?

guys. I have a problem that i can't resolve. I need to switch the behavior using ".on/.off" methods that will be working when i set or remove the tick from the checkbox. How can i do that?
For example: I have a button that will be zooming in/change color/moving by pressing on it. But when i set the tick on one of a checkboxes, i need to disable this event from the button using ".off" method.
I tried like
$(".button").on('click', function(){
$(this).toggleClass('active');
});
$(".button2").on('click', function(){
$(this).toggleClass('active2');
});
$(".button3").on('click', function(){
$(this).toggleClass('active3');
});
$(".button4").on('click', function(){
$(this).toggleClass('active4');
});
var check = $("#check");
check.change(function(){
if ($(this).is(':checked'))
{
$('.button').off('click');
}
});
but for some reason it will disable my event until i refresh the page, even if i remove the tick from one of my checkboxes
Thanks in advance.

This is happening because when you tick the checkbox, your code will remove the click listener from the .button element and you're not setting it back when the checkbox is unchecked.
So, if you want the click listener on the .button element to fire again when the checkbox is unchecked, you can do any one of the two things as mentioned below.
First, you can add an else block after the if block in the change listener of checkbox. Following code will work for this approach:
var check = $("#check");
check.change(function(){
if ($(this).is(':checked')) {
// This will remove the click listener from the button if checkbox is checked
$('.button').off('click');
}
else {
// This will again add the click listener to the button if checkbox is not checked
$(".button").on('click', function(){
$(this).toggleClass('active');
});
}
});
But I will not recommend the above approach because it will unnecessarily increase the size of code.
Here's the second and a better approach. Inside the click event handler function, you can add an if statement to check if the checkbox is ticked. Below is the code for the same:
$(".button").on('click', function(){
if (! $("#check").is(':checked')) {
// This will only be fired if checkbox is not checked
$(this).toggleClass('active')
}
});
You can add this if to any other block according to your requirement.
The main advantages of using the above code are:
Code will not be increased as compared to 1st approach
You don't need a change listener for the checkbox (Yeah! Just remove it!)

How Can I Triger Change Event For HTML Select (Dropdown)?

My HTML page has a Button and a Select Drop-Down (Combo Box). Drop-Down change event is like this:
$('#DDL_ID').on('change', function (e) {
// Some Code Here
});
When I click the button, I am setting some value to Drop-Down and it is working fine.
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123');
});
When I click the button, Drop-Down value is getting changed but Drop-Down change event is not firing. Can anyone help me on this?
Please note this is not a duplicate question.

Setting the val() through jquery will not automatically trigger the event on the item... so you need to manually trigger() it...
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123').trigger('change');
});

Enable button on checkbox selection in MVC 4

Lot of research and tries but didn't work.My Problem is I want to enable my button on check of at least one checkbox from the available list.
Following is the screen:
Initially this button is enabled but my requirement is it should be disabled initially and if at least one of the checkbox is checked then it should be enabled.
Here,I have one view as Create inside which one more partial view is there which displays all the list view with the help of one controller method i.e within my Create view one more view is being rendered which displays all the available list.
If it would have been in one view then I would have easily done this as lot of fiddles are there with jquery by getting the id of the checkbox and passing to one jquery function. I know that I need to check the count for the checkbox in order to make my button enable/disable but again we dont have any change event as that in ASP.
Also on click of add , method for controller is begin triggered as:
[HttpPost]
public ActionResult Create(int id, List<MyModel> myModelList)
{
// code...
}
Here once I click on Add button this controller method is triggered where in my parameters(myModelList) I am able to check which checkbox is checked.So, this thing I need to implement on checking any of the checkbox such that the add button will be enabled on click of which I will be able to add my teams.
So how to implement this or what I need to do for this?
Thanks in advance.

UPDATE: Oops. Added the :checked pseudo class
This is how you might do it in jQuery
$('#add_button_id').prop('disabled', true); // To disable initially
$(document).on('click', '.checkbox_class', function(){
if( $('.checkbox_class:checked').length > 0 ){
$('#add_button_id').prop('disabled', false);
}
else{
$('#add_button_id').prop('disabled', true);
}
});
You'll have to add the id for the button and classes for checkbox as you have in your html code

you can do it this way:
$(document).on('click', '.checkbox_class', function(){
if(".checkbox_class:checked").length > 0)
$('#add_button_id').prop('disabled', false);
else
$('#add_button_id').prop('disabled', true);
}).change();
you can also trigger change on page load:
$(function(){
$(".checkbox_class").tirgger('change');
})

Show hide custom metaboxes, live, with jQuery

I am trying to toggle the visibility of some custom meta boxes via jQuery.
I managed to hide them by default and to make them visible when clicking on the correct post format.
I am not finding a solution for making the meta boxes disappear when the user changes the post format.
e.g.
Default: Hidden
Click on "Aside": Show
Switching from "Aside" to any other post format: hide.
I have the following code:
jQuery(document).ready(function () {
jQuery("#postbox-container-2").addClass("hidden");
if (jQuery("input#post-format-video").is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
jQuery("input#post-format-video").change(function () {
if (jQuery(this).is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
});
});
Any idea?
Different approach based on #zipp fiddle
Query(document).ready(function() {
jQuery( "#postbox-container-2" ).hide();
var toToggle='';
jQuery('input#post-format-video').change(function() {
if (toToggle){
jQuery(toToggle).hide();
}
//alert(this.value+ " is checked");
var selector='#postbox-container-2';
jQuery(selector).toggle();
toToggle=selector;
});
});
even this one works fine but does not change live when I click on a different radio button

Here is a jsfiddle with your example. The change event is triggered only on the checked input. It won't be triggered when it is unchecked for a specific input. In order to know if your specific input is unchecked you need to test if the selected input is yours: $(this).attr('id') == 'post-format-video' and do your action. In my example I am selecting the radio input with $('input:radio[name=myRadio]') therefore you need to adapt your html and code to have the correct selector.
//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
//if we have a radio button selected previously we hide the div related
if (toToggle){
$(toToggle).hide();
}
//select the div we want to show
var selector;
if ($(this).attr('id')=='post-format-video'){
selector='#postbox-container-2';
}
...
//show it (could have called toggle() )
$(selector).show();
//store it for the next selection
toToggle=selector;

Validation using checkbox

I am using jQuery trying to validate that a checkbox has been checked before allowing a user to click on a 'Proceed' button.
The 'Proceed' button is set 'Enable = false' when the page loads.
So far I have tried :
// On check of the accept terms checkbox
$(".chkTandCs").change(function () {
// If checked, enable the Continue button, else, disable it.
if ($(this).is(":checked")) {
$(".lbnAcceptCurrent").removeAttr('disabled');
}
else {
$(".lbnAcceptCurrent").attr("disabled", "disabled");
}
});
This hasn't worked.
The checkbox and 'Proceed' button are inside a modal that opens when a different button has been clicked.
All help very much appreciated

Use prop() instead
$(".chkTandCs").change(function () {
$(".lbnAcceptCurrent").prop('disabled', !this.checked);
});
If the modal generates the markup dynamically, you'll need to delegate
$(document).on('change', '.chkTandCs', function () {
$(".lbnAcceptCurrent").prop('disabled', !this.checked);
});
and replace document with the closest static parent element of the modal