I have a checkbox that by default is set to checked:
<input type="checkbox" id="chkobj" checked />
And I use the following javascript to uncheck it depending on the value of a variable:
var chk = document.getElementById("chkobj");
if(myStr=="1")
{
chk.checked=true;
}
else
{
chk.checked=false;
}
Yet, no matter what I try, the value won't change. Any idea why? I rather stick to pure JS than use jQuery. I'm really curious as to why this won't just work in plain JS. Any help is greatly appreciated. Thanks in advance :)
If you check the element itself. Even if you set chk.checked = false. Which makes chk.checked==false to be true. The element would still have checked attribute and would probably display as a checked box... try chk.removeAttribute('checked') as well to remove the check. And chk.setAttribute('checked', 'checked') to check the box visually.
Related
Simple question, so I made sure to try and a lot of solutions before posting this. I have a checkbox and I can't seem to enable it.
With vanilla JS, I've tried removing the attribute, as well as setting the disabled flag to false, and also using jQuery i've tried to use the Prop to no success.
'''html
<input type="checkbox" id="chkAllowToAdminService" name="chkAllowToAdminService" disabled="disabled" data-init-plugin="switchery">
'''
I've tried the following and none of them are working (vanilla JS and jQuery)
'''
document.getElementById('chkAllowToAdminService').disabled = false;
document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
$('#chkAllowToAdminService').prop("disabled", false);
'''
No error messages at all, just nothing seems to be happening.
To remove attribute you may use removeAttribute(name). In your case:
const checkbox = document.querySelector('#chkAllowToAdminService')
checkbox.removeAttribute('disabled')
To set attribute setAttribute(name, value).
// In jQuery
$('#chkAllowToAdminService').attr('disabled','disabled'); // Add disabled
$('#chkAllowToAdminService').removeAttr('disabled',''); // Remove disabled
// OR
$("#chkAllowToAdminService").attr("disabled",true);
$("#chkAllowToAdminService").attr("disabled",false);
// In JavaScript
document.getElementById("chkAllowToAdminService").disabled = true;
document.getElementById("chkAllowToAdminService").disabled = false;
I think you might have two issue :
make sure you have unique id of element 'chkAllowToAdminService' no other element have same id.
in your remove attribute syntex : document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
I can see quote ' is missing at last.
I've got a huge feeling I'm simply being idiotic here, but is it me or is Js not firing in JsFiddle?
I built this snippet here but can't seem to get it to fire. Im probably missing something super obvious, but would be grateful for any assistance.
HTML
<div id="col">
<h3 class="txt spacer">Dynamic input, based on select value...</h3>
<input type="text" name="field-one" class="txt stretch" />
<div class="boxes">
<input type="checkbox" id="box-2" onChange="myFunction()" checked>
<label for="box-2">Apply a name?</label>
</div>
</div>
</div>
Javascript
function myFunction() {
// Text field element.
var a = document.getElementByName('field-one');
// Checkbox element.
var b = document.getElementById('box-2');
if (b.checked) {
a.disabled = false;
a.placeholder = 'Not Applicable';
alert('Checkbox State Changed.');
} else {
a.disabled = true;
a.placeholder = 'Enter Your Full Name';
alert('Checkbox State Changed.');
}
}
JS FIDDLE
Thanks in advance for the assistance.
Regards,
-B.
EDIT
I'm an idiot. Thanks guys.
Couple of things here, it should be document.getElementsByTagName (plural) and you need to change the settings, that will embed the JS code in before the body closes.
var a = document.getElementsByName('field-one')[0];
I am using [0] here to access the very first element of the array as document.getElementsByName() will return you an array of elements if encountered multiple matching elements. If you want to select a specific one, make sure you select the DOM element in a more specific way.
And change the Load Type to
No wrap - in <body> (<head> will work as well)
Demo
The Javascript Load Type for your jsFiddle is set to onLoad. This will nest your myFunction function, and therefore won't be available in the global scope.
You can either change the Load Type, or set the variable on the window:
window.myFunction = function()....
NB: You then receive another error for getElementByName. This isn't a function of document. You're probably looking for getElementsByName.
Open the DevTools and you'll see
Uncaught ReferenceError: myFunction is not defined
at HTMLInputElement.onchange ((index):192)
Now why isn't the function defined? Perhaps it's not defined at the right spot?
Look at where you load your JavaScript and change it to:
Here's an updated fiddle. Note that I fixed a typo on line 3 getElementsByName.
First, set your seeting of javascript LOAD TYPE to head.
last, is getElementsByName not getElementByName and it would return array so you need to parse.
let a = document.getElementsByName('field-one')[0];
hope it's helpful.
I've got a selection/dropdown with ID #pa_buy-sell[]. What I want to do is if the value is "buy" I want to change the attribute data-required="yes" to data-required="no" from a input field with class wpuf__regular_price_657. I also want to hide the span with class required. The code has to work in WordPress.
I'm quite new in this, so I'm not sure what's the right code. But I thought something like this could be a good starting point:
$('#pa_buy-sell[]').change(function(){
if($(this).val() == 'buy'){
//something need to happen here
}
});
Can someone help me with this?
Your code is correct until now. You have to replace the comment with the following lines:
$('.wpuf__regular_price_657').data('required','no');
$('span.required').hide();
To change the attribute to yes or no. you can use this:
$(".wpuf__regular_price_657").attr("data-required","no");
or you can use disabled as true or false, if you dont want to take input as
$(".wpuf__regular_price_657").attr("disabled", true);
and for hiding the particular span:
$("span.required").hide();
This will work fine in wordpress too
Hope it helped you
Please check with "===" which confirms Strong type checking (type and value) comparison and also refer the code for hiding the div with class required.
<script>
var $ = jQuery.noConflict();
$('.pa_buy-sell.wpuf_pa_buy-sell_657').change(function(){
if($(this).val() === "buy"){
$(".wpuf__regular_price_657").attr("data-required","no");
$("span.required").hide();
}
});
</script>
I am a newbie to jquery.
I have this code written. I want to get the value of 'newValue' when the checkbox is checked. But this code returns 'undefined'.
Please can someone help to get the state of the checkbox: the return value should be true or false, 1 or 0.
$(tableCell).empty();
/Checkbox
$('<input type="checkbox" checked class="EditContactRow" style="width: 20%" />').appendTo($(tableCell)).val(controlValue).blur(function () {
var newValue = $(tableCell).find('checkbox').val();
.....
.....
}
Thanks
Ahoy, Olumide Omolayo
your code seems a little bit messy but it can be fixed for sure. Where is your HTML, would you please add it to your question?
If you need an example: if you have a checkbox you would take it's value by selecting it like this
var myCheckboxValue = $('#myCheckbox').val();
your code:
$('<input type="checkbox" checked class="EditContactRow" style="width: 20%" />')
will not work. since $() is used to access jQuery selectors, those SELECT an element in the HTML/DOM, then you do something with the element. (see this video)
If you want to ADD an element to the HTML/DOM you'd probably use something like
$("#myDiv").html('my html that will be added to the element with id="myDiv"');
Hope this helps. Feel free to ask more :)
P.S. If you post your full code here, we might able to help you much more than just write at random here. People might be able to actually give you the fixed version :)
just a small syntax error.
Change this line var newValue = $(tableCell).find('checkbox').val();
to
var newValue = $(tableCell).find('input[type="checkbox"]').val();
The problem was .find('checkbox') you are trying to find a element who's name is checkbox and you dont have one.. the attempt should be to find a element 's whos type is "checkbox" so use the syntax .find('input[type="checkbox"]')
Correct answer to my question from Reddy
var newValue = $(tableCell).find('input[type="checkbox"]').val();
Thank you all
What would be the javascript below to select the checkbox for value 0?
<input name="bootproto" id="bootproto" type="radio" value="0" key="bootproto">
I tried using
$('input[name="bootproto"]').click() but it didnt seem to work.
$("#bootproto").prop("checked",true);
Since you're using jquery, just set the property "checked" to true (I don't see why you're name selecting when you have a perfectly good ID there as well)
If you want to check it ONLY if value=0, add an if statement before this.
document.getElementById('bootproto').checked = true;
OR
$('#bootproto').prop('checked',true);
I figured out that $('input[value="0"]').click() seemed to work for me.
Try this,
$('input[name="bootproto"]').attr('checked',true);
Checked is actually an attribute of the input tag of type radio, So that you can use the .attr() function to set its checked attribute as true.
DEMO
You don't mention that you're using jQuery even tho you've apparently tried the syntax. On the off-chance you're not using it, try:
var i = document.querySelector('input[value="0"]').checked = true;
I would do the following : $('input[name="bootproto"]:not(:checked)').