I am using the select Shoelace-element for as agreement checkbox and need to check if it is checked or not. Chrome DevTools shows me the added class "switch--checked" to the label when the switch is checked. It is removed when unchecked.
I need to fire some events when the switch is checked and tried the jQuery hasClass function to do so. I have tried several classes next to the one below. None of it made my event trigger. Please help!
if ( $("label::part(base)").hasClass(".switch--checked") ) {
// do something
}
Select element not-checked
Select element strong textchecked
If you get a reference to the element instance you will be able to read the checked property directly, as well as attach an event listener to get notified when the checked property changes:
const slSwitch= document.querySelector('sl-switch');
// Is it checked?
const checked = slSwitch.checked;
// Listen for changes
slSwitch.addEventListener('slChange', (e) => console.log("<sl-switch> is checked?:", e.target.checked));
You can read more about the properties and events that custom-element supports in their documentation: https://shoelace.style/components/switch
Related
I am developing a website, and I need a certain checkbox that when is unchecked the correspondent input box has the read-only attribute and when I check it the read-only attribute gets removed from the input box. Right now, what happens is I load the website, the checkbox is unchecked and the input box does not has the read-only attribute as it was supposed to. Altough when I check and uncheck it the input box gets the read-only attribute.
Why is this happening?
Here is the Javascript code:
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
checkbox.addEventListener("change", function() {
if (!(checkbox.checked)) {
inputElement.setAttribute("readonly", "true");
} else {
inputElement.removeAttribute("readonly");
}
});
Your function sets the readonly attribute when the checkbox is changed.
It doesn't get set when the document initially loads, because the user hasn't changed it.
If you want the function to run when the document initially loads, then you'll need to call it at that time. Alternatively, you could set the attribute in the HTML instead of modifying it with JS (which generally makes more sense when setting default values for attributes). Note that if you do either of these, then the state can never change so the change event handler will never run.)
So I have this radio button that I click and it does click. Except when I inspect the DOM I do not see the checked attribute being added, but I can see that the property check has been set to true. I need to be able to preserve this state since I am saving the HTML. Is there away to add/remove the checked attribute as the property changes? Other than adding a handler on click and checking the property to add or remove the attribute.
You will have to manually set that if you want the DOM to change. The DOM does not automatically modifies itself.
To get the current value of the radio button use javascript:
document.getElementById("radio_group_92").checked // true or false
To set the value, use this:
var radiobtn = document.getElementById("the_id_of_the_group");
radiobtn.checked = true;
The radio button documentation only specifies about the checked property:
Definition and Usage
The checked property sets or returns the checked state of a radio
button.
This property reflects the HTML checked attribute.
There are properties and attributes. Attributes are part of the XHTML and properties are not. In general, setting the property does not affect the attribute on the DOM like in your example or the value attribute of a text input. There are some exceptions though, like the id and name properties which will change the attributes of the DOM too.
In your case you will indeed have to manually check for the checked property as #cacho suggested. However, I think that the change event is more suitable than the click.
document.getElementById("radio_group_92").addEventListener("change", function(e){
console.log(e.target.checked);
}, false);
Simple prospect. Checking a checkbox enables a disabled button. Unchecking the box disables the button once more.
Code:
jQuery ->
$('#subscribe_button').attr('disabled','disabled')
$("[name=chkACCEPT]").click ->
if $(this).attr("checked")=="checked"
$('#subscribe_button').removeAttr('disabled')
else
$('#subscribe_button').attr('disabled','disabled')
I have also tried to use prop in lieu of attr. Seems like such a simple thing. Enable and disable a button. I've put alerts in there, and I know the code is firing. Just failing to do what I want it to.
Instead of using attr(), you need to use .prop() to set the disabled status
$('#subscribe_button').prop('disabled', true)
$("[name=chkACCEPT]").click ->
$('#subscribe_button').prop('disabled', !this.checked)
Also use the checked property of the dom element to check whether the checkbox is checked or not
In your example you are setting disabled="disabled" however the correct way to do it is disabled="true". You can use the this.checked value to set the disabled attribute on the button element:
$('#subscribe_button').attr('disabled', true)
$("input[name=chkACCEPT]").click ->
$('#subscribe_button').attr('disabled', !this.checked)
See the jsFiddle here, button is enabled only when the checkbox is checked.
I have a select inside HTML
<select id="league" name="league">
which I'm listening for changes inside my javascript.
var league = dojo.byId("league");
dojo.connect(league, "onchange", function (evt) { //do stuff }
Which works fine.
However I have a link that I can click which updates the select:
League
The link works as it updates the selected value of the select with the following function.
function updateSelection(NewLeague){
dojo.byId('league').value = NewLeague; // works
dojo.byId('league').onChange; //this isnt working
//dojo.byId('league').onChange(); //this throws: TypeError: dojo.byId("league").onChange is not a function
}
My problem, as I've read through other stack posts is that programmatically updating the value wont trigger onChange, thus I need to call onchange in the code (shown above). As per the comments inline, the onChange isn't being triggered or throws an error. My first thought that it has something to do with the dojo.Connect which listens for onChange, but I havent found any information that says I cant do this, nor any explanation how to get around it.
Any ideas?
Select onchange doesn't fire for programattic changes, you need to fire it yourself with league.onchange();
As noted by #Greg, the call should be lowercase.
Additionally, I don't know if dojo has a trigger method, but in jQuery this would be done as jQuery('#league').trigger('change').
Depending on your version of dojo you may also want to check: http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html
Have you tried just calling the select by it's id using normal js?
document.getElementById('league').onchange.call();
As others have said, you need to trigger the event yourself, just setting the value does not do that. See the code on How to trigger event in JavaScript? to see how in a cross-browser way.
Is there a way to detect when the value of a select list is set to empty by a javasscript and not by the user? It seems that the change-event only triggers by mouse or keyboard.
And is there a way to detect when the number of options in a select list changes (added, removed)?
You have to trigger the change event manually, when you are changing the value of a select with javascript. E.g:
$('#myselect').val(10).change();
In this example the value is set to 10 and the change event is triggered. If there is an event handler attached to the select, it will be executed.
Use Jquery's change function
$("#idofselect").change(function(){ });
To answer your first question, not it's not possible to detect what caused the change in the select list in the change event itself.
However, if there is javascript code changing the select list you could add some logic in there to perform the tasks needed in this scenario.