Develop Reference

keep checkbox enabled using jquery or javascript

I have a checkbox on my website which is currently enabled and it can be disabled by users. What I want to do is to keep it locked in that way so it cannot be disabled.
I think this can be achieved using jquery or javascript but I'm not quite sure how.
<input type="checkbox" value="check" id="moove_gdpr_strict_cookies">
And please note it's a wordpress website. So I can't edit HTML.

you can simple prevent click.
$(document).ready(function() {
$('#moove_gdpr_strict_cookies').click(function(e) {
e.preventDefault();
});
});

Simply you can return false onclick event
$('#moove_gdpr_strict_cookies').on('click',function(){
return false;
});

Would suggest to do something like this:
var form = document.getElementById('yourform');
form.onSubmit = function () {
var formElems = document.getElementsByTagName('INPUT');
for (var i = 0; i , formElems.length; i++){
if (formElems[i].type == 'checkbox'){
formElems[i].disabled = true;
}
}
}

I would not recommend doing this. As suggested by the id of checkbox this checkbox has to do with GDPR. A user on your sight MUST have the right to decline cookies for tracking purposes (which this seems to be). Please be careful, as fines can be very high.
Technically most answers seem viable.

JS class change script? (Working in JS Fiddle)

JS noob here looking for some help. I've written something extremely basic in able to change a class which would hide a page element. The hide class just has a display none.
I've got it working fine in JS fiddle but when replicating it on my site, nothing happens? What am I doing wrong?
JS Fiddle - https://jsfiddle.net/MattPremier/x8rmn4cb/2/
<script type="text/javascript">
window.onload = function () {
var bookShow = "No";
if (bookShow == "No") {
// execute this code
document.getElementById('booking-show').classList.add('hide-widget');
}
else {
// execute this code
document.getElementById('booking-show').classList.add('show-widget');
}
};
</script>
<div id="booking-show" class="show-widget"><p>WORKING?</p></div>

I would recommend checking your CSS to make sure that the display isn’t otherwise set unless you need it to be set then inside the hide-widget CSS class put:
“display: none !important;”
And also remove show-widget from the object at the bottom as it might be conflicting with CSS.
Note Sorry for the bad formatting of this message as I’m on my cell phone.

Onclick of table not working

I am building a html5 Phone app using Cordova and in several pages I am using a table to act as a button. In every page but one this is working without issue but on one page the onclick event will not fire
Here is the HTML of the table
<div id="buttonHolder" class="MiniButtonGridHolder">
<table id="AddButton" class="ButtonGrid" >
<tr>
<td>
<p id="AddLink" class="clickableLinks">Add</p>
</td>
</tr>
</table>
</div>
Here is the JavaScript Used to set the onlick event
function SetButton()
{
console.log("next one");
var CurrentTable = document.getElementById("AddButton");
console.log($(CurrentTable).attr('id'));
CurrentTable.onclick = function () {
Console.log("set");
AddWorkItem();
};
console.log("NOW SET");
}
The AddWorkItem function
function AddWorkItem()
{
console.log("Started");
}
when I run this bit of code all the console.logs work except for the two that would execute when the button is clicked (IE Set and Started). The Jquery one even gets the correct table id.
I am sure the solution is something that will make me kick my self for not seeing it but at the moment I have spent about 3 hours trying to see where I have gone wrong with this and can't find anything.
Can anyone see where I am going wrong with this?
EDIT
I am calling this code here
$(document).on('pagecontainershow', function (event,ui) {
SetButton();
}
I have replicated the problem here:
http://jsfiddle.net/p4bR9/2/

You need to call SetButton() and it's console not Console
jsFiddle

Well, your button isn't clickable until the onclick event listener is added to it. And that isn't added until your SetButton() function is run. And in the code you posted, it doesn't get run.
Try:
$(document).ready(function(){
SetButton();
});

$('#AddButton').on('click',function()
{
alert("check");
});
fiddle demo

I'm not sure I understood. But trying to change this
Console.log("set");
in
console.log("set");
and call in the table with event onlick="SetButton();"

Event handlers aren not attaching to select menu

I'm learning javascript and jquery and I'm a bit stuck. For some reason the event handlers are not attaching correctly. I thought the .change() was the correct one to use for select menus.
$('#tier1').change(function(){
var tier1 = $('#tier1').find(":selected").text();
if(tier1 != 'Month'){
$('#tier2').removeAttr("disabled");
}
});

You need to take of below things.
Make Sure jQuery library is added into head tag,
make sure you are wrapping your code into $(document).ready(function() { //code });
Make Sure ID for each DOM are unique.
Make Sure DOM is present which you are selecting using jQuery selector,
Example
<head>
<script src="jQuery.js"></script>
<Script>
$(document).ready(function(){
$('#tier1').change(function(){
var tier1 = $('#tier1').find(":selected").text();
if(tier1 != 'Month'){
$('#tier2').removeAttr("disabled");
}
});
});
</script>
</head>
<input id="tier1" />

For what I know, .change() is to be used with select menus... but I think there's something else amiss with your code.
Instead of
var tier1 = $('#tier1').find(":selected").text();
try
var tier1 = $('#tier1').find(":selected").val();
If not, scatter some console.log around... Firefox's Firebugger and Chrome's Dev Tools should catch them and give you some clues as to what is happening.

How to call hidden button on a jsf page with javascript/JQuery

I found this question is already asked several times in different forms, but I still need some help on this, since can't get this as in the examples.
I have a JSF 2 page with PrimeFaces, and it contains the following hidden button, which I need to call on pageUnLoad from javascript.
The JSF has:
// Supposed to be hidden eventually
<h:commandButton id="doStuff" action="#{myBean.callMethod()}" />
The javascript has:
var stuff = new Object();
$(window).bind('beforeunload', function() {
stuff.doStuff();
});
stuff.doStuff = function() {
// var hidden = $("#doStuff"); // Incorrect
var hidden = document.getElementById("formId:doStuff"); // Correct
if (hidden === undefined) {
// Some logging
} else {
hidden.click();
}
}
And the managedBean has:
#ManagedBean(name = "myBean")
#RequestScoped
public class MyBean {
public void callMethod() {
// Do stuff
}
}
By debugging I can see that when manually clicking the button, it fires the event correctly.
I am also able to verify that the JavaScript is called correctly, it "seems" to find the element, and performs the '.click()' for it, but I do not catch any event on the server side.
I seem to be doing it as it has been instructed in other similar questions, but I lack the final result.
Any help would be appreciated, thanks.

Hidden button can be clicked by using JavaScript like
document.getElementById('doStuff').click();
However, you should be careful about naming containers. Hidden button must be enclosed by a <h:form> tag and prependid attribute of it should be set false. Otherwise you can access the button with the id formId:doStuff.
See also
Naming Container in JSF2/PrimeFaces
Cannot click hidden button by JavaScript

There is a much simpler way of calling server-side methods from javascript. Define a p:remoteCommand and Primefaces will create a JavaScript-function which you can call from inside your JavaScript-functions.
Use the following for defining the remoteCommand:
<p:remoteCommand name="doStuff" action="#{myBean.callMethod()}"/>
And then to call the bean-method on beforeunload just use:
$(window).bind('beforeunload', doStuff);