Develop Reference

Disable input if checkbox is ticked on page load AND when it is clicked

I've looked at loads of questions that describe how to check weather a check box is checked or not but none of them gives the answer I need. I want to check whether the check box is checked on page load and if it is, disable an input. Then I need the disabled input to be changed when the box is checked/uncheked after page load.
This is what I have:
jQuery(document).ready(function($) {
if ($('.is-repeat-event').prop('checked')) {
$('.event-date').prop('disabled', 'true' );
}
$('.is-repeat-event').change(function(){
var d = this.checked ? 'true' : 'false';
$('.event-date').prop('disabled', d );
});
});
either part on it's own works but putting them together doesn't work (the .change event has no effect on the input).

That is beacause property disabled need to set to boolean true/false values. also you can trigger the event after binding it to see the relevant changes in page load:
$('.is-repeat-event').change(function(){
$('.event-date').prop('disabled', this.checked );
}).change();

Try using trigger():
$(function() {
$('.is-repeat-event').on('change', function(e) {
$('.event-date').prop('disabled', this.checked);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<label>Repeat
<input type='checkbox' class="is-repeat-event" checked='' />
</label>
</div>
Event Date
<input type='date' class="event-date" value="2015-07-12" />

How to uncheck checkbox on back button?

Hi I have numbers of check boxes and below that I have a Button, which will filter data as per check box selection..
When I will click on filter button it will transfer to other page and when I click on back button the checkbox reamains checked.
but I want that when I click on back button then checkbox should be uncheck.
Any help.

For those who have similar issues, add autocomplete="off" to checkbox might help.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

You can reset the checkboxes on page load using jQuery
$('input:checkbox').prop('checked', false);
Demo (Checkbox will be never checked as onload am getting rid of checked property)
ondomready (Place the below code anywhere in your document)
$(document).ready(function(){
$('input:checkbox').prop('checked', false);
});

You may use below code :
window.onbeforeunload = function() {
//unchecked your check box here.
$("input[type='checkbox']").prop('checked', false)
};

Try this when back button is clicked
Use Jquery to clear the checkboxes
$("input[type='checkbox']").each( function() {
$(this).removeAttr('checked');
});

Trigger some jQuery code when a radio button is selected

I have these two radio buttons:
Original <input id="video_is_derivative_false" name="video[is_derivative]" type="radio" value="false">
Derivative (<i>ex. remix, mashup etc...</i>) <input id="video_is_derivative_true" name="video[is_derivative]" type="radio" value="true">
and I want to call some jQuery code when the "Derivative" button is selected. How can I do this?

Just attach a change event to it:
$('#video_is_derivative_true').change(function(){
console.log("Selected");
})
example: http://jsfiddle.net/niklasvh/cyADB/

$("#video_is_derivative_true").click(function(){
alert("your code goes here");
});
Add an onclick handler to the input tag
You could also put something on the change handler
$("#video_is_derivative_true").change(function(){
if($(this).is(':checked')){
alert("more code here");
}
});

You will want to monitor the change event, then in the handler, check to make sure that the button is checked. The second part is important because the change event will also fire when it becomes unchecked. The code would look something like this:
$('#video_is_derivative_true').change(function() {
if (this.checked) {
alert('derivative checked!');
}
});
Here's a live demo ->

$('#video_is_derivative_true').bind('click change', function() {
if (this.checked) {
// derivative is checked
}
});

$("#video_is_derivative_true").click(function(){ alert("your code goes here"); });

onchange not working with radio button

I have a few radio buttons which should call hider(something); when they change, meaning when they are checked or unchecked. This works, i.e. when checked they call the JS function, however, if they're unchecked due to selecting another radio button from that group, it does not call the js script again.
Do I need to use something else than onchange?
This is what the radio buttons look like at the moment:
<input name="ostype" type="radio" value="0" onchange="hider(solaris);">solaris
<input name="ostype" type="radio" value="1" onchange="hider(linux);">linux
My hider function is currently:
function hider(divid) {
if ($(divid).is('.hidden')) {
$(divid).removeClass('hidden');
} else {
$(divid).addClass('hidden');
}
}

Since this question is still not answered correctly yet ranks quite high for me in Google for "radio button onchange", here's a proper solution for anyone still looking.
If you're using jQuery, just use jQuery's attribute selector as noted by Flavius Stef.
OP, it's not entirely clear what your code does. Let's assume in your code you want to add the "hidden" class to whatever radio button is active.
$("your selector here").change(function() {
$('input[name="' + this.name + '"]').removeClass("hidden");
$(this).addClass("hidden");
});
Please note the difference between $(this) (the jQuery object) and this (the DOM object). Basically I'm removing the "hidden" class from every input that goes by the same name, and then I add the "hidden" class to the current input.
Of course I'm assuming here that you're not using duplicate names for different inputs on the page. Also note that this would only work for radio buttons, as the radio button "change" event only fires when activated, not when deactivated.
Listening for onchange on both checkboxes and radio buttons
In my case, I wanted to add a "checked" class to active radio buttons and checkboxes. Since the checkbox fires the "onchange" event both when checked and unchecked, I needed a bit of extra code.
$('input[type="radio"]').change(function() {
$('input[name="' + this.name + '"]').removeClass("checked");
$(this).addClass("checked");
});
$('input[type="checkbox"]').change(function() {
$(this).toggleClass("checked", ($(this).is(":checked")));
});
The latter function uses toggleClass to set the "checked" class if .is(":checked") is true.
Alternatively you might want to combine the two functions into something like:
$('input[type="radio"], input[type="checkbox"]').change(function() {
if(this.type == "radio")
$('input[name="' + this.name + '"]').removeClass("checked");
$(this).toggleClass("checked", ($(this).is(":checked")));
});
Either way, always be careful when listening for an onclick event as it will not fire when the input is activated through keyboard navigation.

Use onclick.
Also as the argument of your function call you'll need to either use a string with the id as a jQuery selector ('#solaris') - better yet use this:
<input name="ostype" type="radio" value="0" onclick="hider(this);">solaris

Bind change event to ALL radio buttons on document ready:
$(function(){
$('input[name=list_type]:radio').on("change", function(){
showHideBlock();
});
showHideBlock();
});
Show -- hide block depends on ONE radio button status:
function showHideBlock(){
if ($("#Option").is(':checked')){
$('#Block').show();
} else {
$('#Block').hide();
}
}

<input name="ostype" type="radio" value="0" onclick="hider('solaris');">solaris
<input name="ostype" type="radio" value="1" onclick="hider('linux');">linux
function hider(divid) {
$( 'div.div_class' ).hide();
$( '#' + divid ).show();
}
Make sure you add a class to call the divs and make sure you put quotes around solaris and linux in the function calls

Here's a version that you might draw inspiration from (tested on Chrome and FF):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<input type="radio" name="ostype" checked="checked" onclick="hider('linux')">linux
<input type="radio" name="ostype" onclick="hider('solaris');">solaris
<div id="content">
<div id="linux">linux</div>
<div id="solaris" style="display:none;">solaris</div>
</div>
<script>
function hider(divname) {
$('#content div').each(function(){
$(this).hide();
});
$('#'+divname).show();
}
</script>
</body>
</html>

If I understand you correctly you can just use an onClick on every button and hide the others while showing the one your clicking on.
Like this:
function showInfo(info)
{
var info = document.getElementById("1");
info.style.display = "block";
var info = document.getElementById("2");
info.style.display = "none";
}
So the first one is showing and the second one is hiding.
Then just add one for every div that should be hidden.
You can also do this with jQuery.
function showAndHide(val1, val2)
{
$(val1).hide();
$(val2).show();
}
And don't forget to have style="display:none" in every div.

did you declare the vars solaris and linux?
otherwise your browser should show you an Error

Triggering a jquery action when the users mark a Checkbox

im very new in javascript and jquery. I have this checkbox:
<label for="editable">Editable </label><input name="editable" type="checkbox" id="edita"/>
And this jquery action:
$('#slickbox1').toggle(400);
return false;
I want to execute that action when the checkbox is checked. Thanks!

You could try:
$('#edita').change(
function() {
if ($(this).is(':checked')) {
$('#slickbox1').toggle(400);
}
});
Although it's worth noting that running the toggle() method only when it's checked (assuming that it starts off un-checked) involves the user clicking the input once to show it, and then again to remove the check and again to re-check it so that it hides as a result of the toggle().
It might be worth considering:
$('#edita').change(
function() {
if ($(this).is(':checked')) {
// checked
$('#slickbox1').show(400);
}
else {
// un-checked
$('#slickbox1').hide(400);
}
});
Which shows $('#slickbox1') if the check-box is checked, and hides it if not,
Or:
$('#edita').change(
function() {
$('#slickbox1').toggle(400);
});
Which toggles the $('#slickbox1') between show() and hide() when the input is checked and un-checked.
Edited to address the question raised by DomingoSL (the OP) in comments:
...can you please make an edit to see the procedure if now the triger is not a checkbox but a button?
There are two changes that need to be made to accommodate this:
a button has no change event, so it would have to use click() instead, and
a button has no :checked (or equivalent) state, so the if/else becomes redundant.
One way of doing it, though, and I'm assuming your element names remain the same since you've posted no information to the contrary, is:
$('#edita').click(
function(){
$('#slickbox1').toggle(400);
});