We Keep Coding

JS way to enable/disable JQ-Chosen select

So I have this dilemma of disabling the select statement with ui-jq="chosen" as its front-end design. Although this is part of a Laravel project, hope someone can help me fix this problem under JS alone.
Using a checkbox to disable/enable the select statement that is under chosen, the disabled attribute doesn't work with it.
<input type="checkbox" name="checkerBox" id="checker" #if ($leave->onProject) checked #endif onclick="selectHider()">
<select name="leave_id" ui-jq="chosen" class="w-full" id="selection"> //options snipped <select>
then for the JS script below
function selectHider() {
var checkBox = document.getElementById("checkerBox");
if (checkBox.checked == true){
document.getElementById("selection").disabled = false;
} else {
document.getElementById("selection").disabled = true;
}
}

Try this:
function selectHider() {
var checkBox = document.getElementById("checkerBox");
//You can set disable default here, depend on your logic
document.getElementById("selection").setAttribute("disabled", "disabled");
if (checkBox.checked == true){
document.getElementById("selection").removeAttribute("disabled");
}
}

Checking between two radio buttons with javascript .prop('checked');

I have these two radio buttons and I am checking to see if one of them is checked with the below javascript. As I type this question I realize that my script only checks if a specific radio button is checked. How can I check to verify that one of the two are checked?
jQuery(".GenderM1").each(function() {
var isChecked = jQuery(this).prop('checked');
if (isChecked == false) {
e.preventDefault();
pass = "false";
alert("Please select gender.");
return false;
}
});
<td>
<input type="radio" name="persinfo_gender[0]" <?php if($row_c->persinfo_gender == "0") echo "checked";?> id="maleradio" class="GenderM1" value="0" required>M
<br>
<input type="radio" name="persinfo_gender[0]" <?php if($row_c->persinfo_gender == "1") echo "checked";?> id="female_redio" class="GenderM1" value="1" required>F
</td>

Your code
jQuery(".GenderM1").each(function() {
var isChecked = jQuery(this).prop('checked');
if (isChecked == false) {
e.preventDefault();
pass = "false";
alert("Please select gender.");
return false;
}
});
You're comparing a boolean variable against a boolean value, use it directly:
isChecked == false// Use !isChecked
^
You're using an undeclared e, probably you thin that .each receives an event.
e.preventDefault();
^
The main problem is your loop comparing each radiobutton.checked attribute, you need to check is at least one of then is checked to stop your loop.
This code snippet show how to check if a radiobutton was checked:
var isChecked = false;
jQuery(".GenderM1").each(function() {
isChecked = isChecked || jQuery(this).is(':checked');
if (isChecked)
return false;
});
if (!isChecked) {
var pass = "false";
alert("Please select gender.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="persinfo_gender[0]" class="GenderM1" value="0" required>M
<br>
<input type="radio" name="persinfo_gender[0]" checked class="GenderM1" value="1" required>F
See?, the alert is not being shown when a radiobutton is checked.
Now, the best approach to know whether a radiobutton group has at least one of them checked:
$('.GenderM1:checked').length
The line above returns how many radiobuttons are checked (1 or 0) because you only can select one of then. That selector works with checkboxes as well.

the method .prop() is available since jQuery 1.6, in previous versions you have to use the method .attr()
which version do you use?
Still I think that what you want to do is that if you have not selected a genre that shows an error and with the code you have, it will not work well. To do this you must do the following:
1- Mark one of them selected by default, that is, establish it as checked by default, this eliminates the possibility that the error of not marking it will be committed.
2- Modify the validation you perform, otherwise it will always return false because only one will be selected and you will go through the entire radiobuttons arrangement, so that when you reach the unselected radiobuttons it will return false.
if ($('input[class="GenderM1"]').is(':checked')) {
// do something;
} else {
//do another thing;
}

localStorage how to save a checkbox

I want to save a checkbox with localstorage. So that when i have checked the box and I close the browser and i re-open it, it will still be checked. right now if i click on the checkbox and i press the save button it doesn't save the checkbox.
how can i achieve this?
this is my code:
<script>
function save(){
var checkbox = document.getElementById('checkbox1zaal1');
if(document.getElementById('checkbox1zaal1').checked) {
localStorage.setItem('checkbox1zaal1', true);
}
}
function load(){
var checked = localStorage.getItem('checkbox1zaal1');
if (checked == true) {
document.getElementById("checkbox1zaal1").setAttribute('checked','checked');
}
}
function wis(){
location.reload();
localStorage.clear()
}
</script>
<body onload="load()">
<input type="button" id="ReserveerButton1" value="save" onclick="save()"/>
<input type="button" id="Wisbutton1" value="delete" onclick="wis()"/>
<input type="checkbox" id="checkbox1zaal1">1e film van de dag</input>
</body>
thanks for any advice!

1). Because boolean true is not equal to string "true". So comparison checked == true is always false, and checkbox never gets checked.
Instead try this:
var checked = JSON.parse(localStorage.getItem('checkbox1zaal1'));
if (checked == true) {
document.getElementById("checkbox1zaal1").checked = true;
}
And remember whatever you store in localStorage is always a string, and only a string. That's why when you save something more complex then primitive value (for example some object) make sure to use JSON.stringify on it first.
When you retrieve the value from localStorage you should convert it back to it's corresponding javascript type.
In general load function can also be improved:
function load(){
var checked = JSON.parse(localStorage.getItem('checkbox1zaal1'));
document.getElementById("checkbox1zaal1").checked = checked;
}
2). Another problem will come up once you try to uncheck checkbox. You are not handling it currently, so change save function to this one:
function save(){
var checkbox = document.getElementById('checkbox1zaal1');
localStorage.setItem('checkbox1zaal1', checkbox.checked);
}
Demo: http://jsfiddle.net/Lwxoeyyp/1/

The problem is that you are storing value as "true" in localStorage which is a string format, Now at time of loading the page value is retrieved as string and you are comparing that String "true" with boolean true. This will return false. One small change as
if (checked == "true")
now this should work.

You can also retrieve the status of your checkbox this way:
var selCheck = document.getElementById("checkOne");
selCheck.checked = (localStorage.getItem("34_chkOne")=="true");
Obviously,
"checkOne" is the id of the checkbox.
"34_chkOne" is the name of the local storage variable.
To store the value, you simply use
var selCheck = document.getElementById("checkOne");
localStorage.setItem("34_chkOne", selCheck.checked);
and, as said above, a variable of type string will be stored.

am using this jquery code and is working with me better
$(function() {
var sound_t_s_data = localStorage.getItem("sound_t_s");
if (sound_t_s_data == "yes") {
$("#sound_t").prop('checked', true);
}
else if(sound_t_s_data == "no"){
$("#sound_t").prop('checked', false);
}
});
$("#sound_t").click(function() {
if ($(this).is(":checked")) {
localStorage.setItem("sound_t_s", "yes");
} else {
localStorage.setItem("sound_t_s", "no");
}
});
And if you want to us it in function use like this
//Play Audio
const s_a = new Audio("audio/s_a.mp3");
$( "#s_r" ).click(function() {
if ($('#sound_t').is(':checked')) {
s_a.play()
}
});

How to check whether the checkboxlist is checked atleast one in Struts2?

I'm working in struts2 framework. I have a checkboxlist in my code.
<div id="MyCheckbox">
<td>
<s:checkboxlist theme="simple" name="claimListView.claimStatus" list="#{'U':'Unprocessed', 'P':'Processed','R':'Routed','S':'Sent'}" id="claimStatus" required="true" value="defaultColor"/>
</td>
</div>
So I want this field to be a required field. I mean the user should select at least one check box. Else an error msg should be throwed and prevent the form to be submitted. How can i achieve this ?
I tried in jquery given below is the code.
var n = $("#MyCheckbox input:checked").length;
alert("The count is : "+n);
if (n>0) {
return true;
}
else{
return false;
}
I know i'm missing something. Can anyone help me, where i'm getting wrong ?

Finally I found out the solution to my own question. The below script is working fine.
var n = $('input[name="claimListView.claimStatus"]:checkbox:checked').length;
if (n>0) {
return true;
}
else{
return false;
}

Undefined values for JQuery checkboxes

I have 3 checkboxes but they are showing as undefined in an alert box. Is there a trick to getting them to show a value? I tried putting a value of 1 in the input tag but it still reports as undefined.
Ok, thanks.. Here is some code.
else if (item.field == "admCustRptDly" && item.value == "1")
{
$('#admCustRptDly').attr('checked', true);
}
else if (item.field == "admCustRptSumm" && item.value == "1")
{
$('#admCustRptSumm').attr('checked', true);
}
else if (item.field == "admCustRptDtl" && item.value == "1")
{
$('#admCustRptDtl').attr('checked', true);
}
<input type="checkbox" id="admCustRptDly" name="admCustRptDly" class="admChkbx">
<input type="checkbox" id="admCustRptSumm" name="admCustRptSumm" class="admChkbx">
<input type="checkbox" id="admCustRptDtl" name="admCustRptDtl" class="admChkbx">

your jquery is off, this doesn't quite give the response you'd expect, rather to find if a check box is checked:
var checked = $("#admCustRptDtl:checked").val();
Also, the checked attribute will never equal true, the html is actually checked="checked"

else if (item.field == "admCustRptDly" && item.value == "1")
I don't understand what are you trying to do here? I'm guessing you are trying to verify the value of "admCustRptDply" checkbox. Maybe post also the code before this.
You can get the value like this:
var val = $("#admCustRptDly").val()
But in your HTML the checkboxes don't have a value attribute.
You can get the checked property of a checkbox like this:
var checked = $("#admCustRptDly").attr("checked")
And you can set it like this:
$("#admCustRptDly").attr("checked","checked")

Could you please expand? Some example code would be very helpful, you might've just misspelt the checkbox name when trying to use it.