Checkboxes read-only attribute HTML - javascript

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.)

Related

Cannot trigger Shoelace (CSS) select element on change

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

how watch to change angularjs model which checkbox changed from jquery

I use https://github.com/Dimox/jQueryFormStyler for styling form inputs.
I set the property ng-model="c.model.acept".
If I click on "styled checkbox", then input gets to property "checked", but the angular model still has the old value.
I tried to trigger the change event with no result.
If I trigger the click event, then the checkbox gets changed twice (once from click, and then the second time from the triggered click event).
How to fix it?
You can not change "ng-model" of particular input field conditionally.
In this condition what you can do is, keep two input field and use "ng-show" or "ng-if" attribute to show & hide input field conditionally.
Hope this will hep you.

Show radio Property in DOM

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);

Javascript Disabling Multiple field objects onchange

I was using the following script to disable multiple field objects when one field was selected, I have changed the fields so that they no longer have a default value of zero but can have varying values:
JS
function disablefield(fieldObj)
{
var fields = new Array('Seat_1200', 'Seat_1230', 'Seat_100','Seat_130','Seat_500','Seat_530','Seat_600','Seat_630','Seat_700','Seat_730','Seat_800','Seat_830');
for(var i=0; i<fields.length; i++)
{
fieldObj.form[fields[i]].disabled = (fieldObj.value!=0 && fieldObj.name!=fields[i]);
}
return;
}
Can anyone suggest a way to detect the current value of the fields seat_xxxx (which are loaded dynamically) integrate it into the above script then disable the all fields when the value one changes. Or alternatively if the field is de-selected i.e. the user changes his mind and selects another option, then the field is set to zero automatically to satisfy the above script re-enabling all the selection options.
In response to the problem from the author I have a new code set.
I would use a Jquery button set to represent all the tables you have. Then selectively disable them based on the result. Below is a fiddle
http://jsfiddle.net/05cpss80/
Buttonsets are really just classed checkboxes but they give you what you need.
<input type="checkbox" id="check1"><label for="check1">Table1</label>
As such you can add additional classes to them to stop them from "checking"
$('#check2').attr("disabled", "disabled");
I would recommend you add some css to make it more obvious, but try the fiddle. Click 2, then the button and it will no longer work. (Thus when they make a selection you call disable on whatever tables you need)

Input value updated via JS won't display

I'm creating and setting a default value for an input (type is left default, but when specifically set to text, I get the same problem) element. The value, according to JS, does update, but I don't see the change in either the displayed page or source.
temp3 = document.createElement('input'); temp2.appendChild(temp3);
temp3.value = "a";
If I check the value, via alert(temp3.value), I do see "a", but I see no change on the created text input on the page, nor when I check via Chrome's Inspect element feature.

Categories