We Keep Coding

How to enable/disable a button via checkbox and keep the button active or inactive after refreshing the page

I have a button and I want to do the following
Disable this button by clicking on the checkbox that refers to it
Keep it disabled even after refreshing the page
Do the same, but instead. The button is disabled and now I would like to enable it again by clicking on the checkbox that references it keeping it that way after refreshing the page
I found two references that do exactly what I need, but I don't know how to put the two solutions together. This and this
HTML code
<div id="billing">
<input type="checkbox" id="billing-checkbox" checked>
<input type="button" value="Hello Javascript!">
</div>
Javascript code
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);
function toggleBilling() {
var billingItems = document.querySelectorAll('#billing input[type="button"]');
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
Thank you so much!

This will give a script error in the snippet, probably because it is a sandbox and doesn't allow for localStorage. But this is tested and works. See comments in the code for explanations. You can set the checkbox on or off and when you refresh the page, it will 'remember' it's state
$(document).ready(function() {
// first thing is to set the checkbox based on the localStorage key that we may have set in the past
$('#billing-checkbox').prop('checked', localStorage.getItem('buttonDisabled') !== "disabled");
// then we run our toggle billing
toggleBilling()
// we set up our change handler.
$('#billing-checkbox').on('change', toggleBilling);
});
function toggleBilling(e) {
// we set the disabled based on the check button status
$('#billing input[type="button"]').attr('disabled', !$('#billing-checkbox').prop('checked'))
// we set the localStorage based on the button disabled
localStorage.setItem('buttonDisabled', $('#billing input[type="button"]').attr('disabled'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="billing">
<input type="checkbox" id="billing-checkbox" checked>
<input type="button" value="Hello Javascript!">
</div>

checkbox toggle change without any user interaction

I call a function in jquery for a checkbox toggle change. It works as expected.
Now I want to change this when the box is checked show some tables else hide.
But I don't know how to modify my function.. [1]
How can I modify this ?
[1]
HTML
<label class="checkbox"> <input type="checkbox" id="toggleSequence" name="sequence_check" id="sequence_check">
Jquery
$("#toggleSequence").change(function(e){
if($(this).is(":checked")){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});

JS Fiddle
$('#toggleSequence').parents('table').next().hide(); // first you need to hide it use can also use css for this
$("#toggleSequence").change(function (e) {
if ($(this).is(":checked")) {
alert();
$(this).parents('table').next().show();
} else {
$(this).parents('table').next().hide();
}
});

condition on radio button onclick, if false don't check

onclick of one radio button i have to check one condition if true i have to check it or restore to same old status,
html
<input type="radio" name="test" id="radio0" onclick="myFunction()" checked />
<input type="radio" name="test" id="radio1" onclick="myFunction()" />
<input type="radio" name="test" id="radio2" onclick="myFunction()" />
JS
globalCondition = false;
function myFunction()
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}

As I said in comment return in the function will not do anything as you're not returning the function value in the in-line code.
Although the other solutions offered are correct, to keep your code unobtrusive, you should not have inline JS at all (remove the onclick='s).
I realize the question was not tagged jQuery, but maybe it should have been: Instead on onclick you should use a jQuery event handler, selecting only the set of radio buttons.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/KVwL3/1/
globalCondition = false;
$(function(){
$("[name=test]").click(function(e){
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
return false;
// or
e.preventDefault();
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
});
});
Notes:
DOM ready event:
$(function(){ YOUR CODE HERE }); is a shortcut for $(document).ready(function(){ YOUR CODE HERE});
Selectors
If an attribute [] selector = value contains special characters it needs to be quoted:
e.g.
$('[name="IstDynamicModel[SD_WO_CREATE]"]')
There are any number of selectors that will choose just the three radio buttons. As this is a simple one-off connection, at startup, there is no real speed difference between any options, but you would normally try and make the selector specific in ways that might make use of various lookup tables available to the browser:
e.g.
$('input[type=radio][name="IstDynamicModel[SD_WO_CREATE]"]')
This will be slightly faster as it will reduce the slowest check (the name=) to only radio inputs.

try this:
globalCondition = false;
function myFunction(e)
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
e.preventDefault();
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}

USe like this
<input type="radio" name="test" id="radio1" onclick="return myFunction()" />
javascript
globalCondition = false;
function myFunction(e)
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
return true;
}
else
{
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}

Working With checkboxes in the web pages

I have group of checkboxes and that are compulsory to be applied but the situation is user can be able to check only one check box at a time. So, for this I have implemented something like this with the help of internet. No doubt it works fine when there are no checkbox checked by default. But suppose, one of the checkbox is checked true when page loads, then this does not works unitl I click on checkbox twice.
Here is what I am using::
So , Assuming I have set of 5 checkboxes, I set same class name for all the checkboxes and then
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
In View page I have declared::
function Checkme(class_Name) {
Check_OR_Uncheck(class_Name);
}
In Common js::
function Check_OR_Uncheck(class_Name) {
$("." + class_Name).click(function () {
if ($(this)[0].checked) {
$("." + class_Name).each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
}
else {
$(this)[0].checked = false;
}
});
}
Please Help me to achieve this..

Keep your code in the document ready event. This will register the click event for "myclass".
$(".myclass").click(function () {
if ($(this)[0].checked) {
$(".myclass").each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
} else {
$(this)[0].checked = false;
}
});
jsfiddle

You could use document ready handler and call method:
jsFiddle
$(function(){
$(':checkbox:checked').each(function(){
Checkme(this.className);
});
});

Try this
$(function(){
$('.myclass').click(function(){
var s=$(this).prop('checked');
if(s==true)
{
$('.myclass').prop('checked',false)
$(this).prop('checked',true)
}
});
});
Or
You simply can use
if(s==true)
{
$(this).siblings().prop('checked',false);
}
FIDDLE

Try this
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})

Instead of implementing a group of check boxes that behave like a group of radio buttons, I suggest implementing a group of radio buttons that look like a group of check boxes:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
This approach simplifies your implementation; you have two one-line CSS rules instead of a JS event handler function, event binding (on both document ready and the HTML element itself), not to mention a possible dependency on jQuery (if you choose to use it).
The catch to this approach is that it requires CSS3 support. For more info, check out this SO answer: https://stackoverflow.com/a/279510/2503516

How do I check if a checkbox is checked with JQuery?

I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.
I think I am close, but it doesn't seem to be working.
Here is my code:
if($('#foreign_checkbox').attr('checked')) {
$('#additional_foreign').click(function() {
alert('This click function works');
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.
What am I doing wrong?
EDIT:Here is my HTML for clarification.
<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>

try using $('#foreign_checkbox').is(":checked") - rest of the code looks fine
If this was my code I'd do something like this to make it work:
<input id="foreign_checkbox" type="checkbox" />
<span style='display:none' id="additional_foreign">Click Me</span>
<script type="text/javascript">
$(document).ready(function() {
$("#foreign_checkbox").click(function() {
if($('#foreign_checkbox').is(':checked')) {
$('#additional_foreign').show();
} else {
$('#additional_foreign').hide();
}
});
$('#additional_foreign').click(function() {
alert('This click function works');
});
});
</script>

The problem is that the code doesn't run continually, only when the page loads, when all the boxes are unchecked. You need an action that fires when the box is checked or unchecked, which adds an action or a class to the button:
$('#foreign_checkbox').change(function(){
if (this.checked){
$('#additional_foreign').click(function() {
doSomething();
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
});