We Keep Coding

Jquery radio prop not updated

Got a weird one.
I have the below code where I select a radio element and try to set it as disabled.
let radio = element.find('input[type="radio"]');
// radio.remove();
radio.prop("disabled", true);
If I use the remove() method, the element gets removed.
However, when I try to set the "disabled" prop to true, it just doesn't work.
Don't see the HTML updating either.
I've tried radio.attr("disabled", true); and radio.attr("disabled",'disabled');with no luck as well.
Any idea why this is happening?
Using jQuery v3.5.1.
Thanks

With jquery, it is easy to do as follows, means you are in right direction:
element.find('input[type="radio"]').prop('disabled', true);
or
$('input[type="radio"]').prop('disabled', true);
You need to verify what you have written in element. Can you write in detail how did you have declared element?

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

Keep cell color changed with checkbox on refresh

I have cells changing background color on checkbox check and I worked out how to keep the checkboxes checked on refresh (though looking back I don't think that works anymore), but I don't know how to keep the color change on refresh. I don't actually know Javascript at all and this is all from other questions but I want it to work. If I've done something completely wrong please correct me and don't assume I did it on purpose because I have absolutely no idea what I'm doing.
$(document).ready(function() {
$(".colourswitcher").click(function() {
if($(this).is(":checked")) {
$(this).closest("td").css("background","#ff3333");
}else {
$(this).closest("td").css("background","#202020");
}
});
});
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

Since you're new to javascript, I'm going to ask the dumb question: Have you included jQuery?
This code that you've pulled makes use of jQuery, a very useful library (not built-in to javascript) that has become so commonplace that people often don't even state its name when asking or answering a question involving it. But anytime you see that $ notation, you're probably dealing with jQuery.
You need to include the library file in your html file so it knows what those special symbols and syntax are:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
If you're testing this stuff in Google Chrome, press F12 and view the developer console. You will see "undefined" errors in red when you are missing things like this.

Here's another answer assuming you have a better working knowledge than my first answer:
The first bit of your code runs when the html document has loaded and attaches an event listener to change the nearest cell background color accordingly when the checkbox is clicked. Note two things here though. 1) that behavior will be attached to all html elements with the class "colourswitcher", not just inputs. 2) that behavior assumes that what was clicked has a property "checked", which only a checkbox does.
The middle bit I presume is supposed to run once, when the page is first loaded, to get the saved state of the checkbox from localStorage. This bit could be moved into the document ready bit.
The third bit of your code attaches an event listener to every input element (not just checkboxes) such that every time one is clicked, a checked true/false state will be saved in localStorage.
localStorage is a convenient way to save information between browser refreshes. You can save anything you want, ie. localStorage.CandyCanes = 7 and that variable will be stored in the user's browser and can be recalled later. Note that your above code will only work as intended if there's a single checkbox, because you're using one slot, or one variable, in localStorage to save: localStorage.input.
That's all I'm going to elaborate on this for now. If this is more than you expected, then it's time to hunker down and learn, or get a professional involved.

HTML Checkbox Click() Return FALSE or TRUE instead of READONLY or DISABLED using jQuery

Since I don't have enough points to leave a comment, I must ask a question. The situation I'm referencing can be seen here LINK. And I promise that I've Googled for hours before posting a question.
I'm trying to be able to "toggle" HTML checkboxes to be readonly. Here is where I am so far.
"DISABLED" is NOT an option. It won't post with the form.
"READONLY" is NOT really readonly. It may gray-out, but it can still be clicked.
The only thing that seems to work is what the LINK refers to and that is applying READONLY to the checkboxes and then some jQuery like:
$(':checkbox[readonly=readonly]').click(function(){return false;}); or $(':checkbox[readonly=readonly]').click(function(){return true;});
I've also messed around with swapping classes in case there was something limiting about the readonly attribute.
THE PROBLEM is that whatever the first setting becomes (TRUE or FALSE) is what it stays like until the page is refreshed. I can't re-enable the checkboxes simply by running the other statement to return the opposite (FALSE or TRUE).
QUESTIONS
Is there a way to be able to toggle the RETURN (TRUE or FALSE) for the .click event?
Is there another alternative for toggling the ability to check the checkboxes?
Thanks a bunch.

jsFiddle DEMO
If you want to toggle between return false; & return true; you could use .change() event & come up with a specific condition to toggle.
$(':checkbox[readonly=readonly]').change(function () {
if($(this).is(':checked'))
console.log("return false");
else
console.log("return true");
});

OK finally figured it out. I'll try to keep my points organized.
Include jquery-ui.js, not sure why, but it needs it.
Use a .change() event to add and remove two classes that designate READ/WRITE
Use $('.ReadClass').bind('click',false); to prevent checking
Use $('.ReadClass').unbind('click', false); AND switch the classes AND add $('.WriteClass').bind('click',true); to en-enabled checking
Here is a link to my jsFiddle demo.
The demo loops through all specified form element to toggle the ability for the user to enter data.
Hope this helps somebody else.

Checkbox not being checked when running function

I have a checkbox that when it is clicked it submits the form to the server to store the detail. All works fine except that after the form is submitted I update a div to say submitted but the checkbox isn't ticked. The page isn't refreshed of course and upon page refresh it is ticked.
I thought I might be able to check the box myself as I'm using jQuery but I have a lot of these checkboxes each with a dynamic name so I'm not sure how I would call them. I thought something like:
$('input[name=("favourite" + id)]').attr('checked', true);
might work but no luck. If I don't call the function on the checkbox being ticked the checkbox behaves normally.
Thanks for anything that could help.

You should break your string in order to introduce the value of the id variable into your selector, you can do it like this:
$('input[name="favourite' + id + '"]').attr('checked', true);

Try doing
$('input[name=("favourite" + id)]').checked = true;
instead.
The issue may be that setting the attribute is not automatically interpreted by your browser as changing the DOM property. This is a bit confusing, but on browsers like Firefox, etc, HTML attributes and DOM properties are stored separately (most are named the same, but there are exceptions - such as the class attribute being represented by the className property).
Changing properties affects the behavior of the Elements, while attributes do not always have the same effect - on some browsers they are only parsed during initial render.