The functionality of the disabled and checked options on the radio button seems to be malfunction

Question

The functionality of the disabled and checked options on the radio button seems to be malfunction

Within an Angular HTML document, I have a set of radio buttons that share common names. I am attempting to update their disabled and checked properties from a .ts file, but the changes are not taking effect. Here is the code snippet:

let elements = document.getElementsByName('option');
 console.log(elements.length);
    for(var i=0;i< elements.length;i++){
        elements[i].setAttribute('disabled','true');
        elements[i].setAttribute('checked','false');
    }

Is there anyone who can provide assistance with this issue?

html css angular

Answer 1

Answer №1

Have you considered utilizing data/attribute bindings instead of directly manipulating the DOM when working with ng?

https://docs.angularjs.org/api/ng/directive/ngDisabled https://docs.angularjs.org/api/ng/directive/ngChecked

For example:

<input type="checkbox" ng-checked="model.isChecked" ng-disabled="model.isDisabled" />

Answer 2

Have you considered utilizing data/attribute bindings instead of directly manipulating the DOM when working with ng?

https://docs.angularjs.org/api/ng/directive/ngDisabled https://docs.angularjs.org/api/ng/directive/ngChecked

For example:

<input type="checkbox" ng-checked="model.isChecked" ng-disabled="model.isDisabled" />

Answer 3

Answer №2

Follow this code snippet to achieve the desired result:

component

let items = document.querySelectorAll('input');
    console.log(items);
    for(var j=0;j< items.length;j++){
      items[j].checked = true;
      items[j].disabled = true;
    }

DEMO

Answer 4

Follow this code snippet to achieve the desired result:

component

let items = document.querySelectorAll('input');
    console.log(items);
    for(var j=0;j< items.length;j++){
      items[j].checked = true;
      items[j].disabled = true;
    }

DEMO

Answer 5

Answer №3

Here are some steps to follow when trying to manipulate attributes:

Start by attempting to access or change a defined property, such as elements[i].disabled = true
If a specific property is not available, resort to using getAttribute() or setAttribute()

Answer 6

Here are some steps to follow when trying to manipulate attributes:

Start by attempting to access or change a defined property, such as elements[i].disabled = true
If a specific property is not available, resort to using getAttribute() or setAttribute()

The functionality of the disabled and checked options on the radio button seems to be malfunction

Answer №1

Answer №2

Answer №3

Similar questions

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Determine the aspect ratio with a constant adjustment using CSS/SCSS

What are the best practices for utilizing intro.js effectively on mobile devices?

The Angular Google map fails to show up when embedded into a SweetAlert2 popup

Can you explain the purpose of the #shadow-root found within elements?

Perform an action after the Ngx Bootstrap modal has been hidden

Removing a Request with specified parameters in MongoDB using NodeJS

Do additional MySql tables have an impact on the speed of searches within a MySql database?

Images do not appear on Bootstrap Carousel as expected

Teaching jQuery selectors to detect recently-added HTML elements

Using window.open and appending a new feature to it

Utilizing the dialogue feature within Angular 6

Unable to render ASP.NET Core 2 WebAPI and Angular application on the webpage

Tweenmax opacity will hold at 1 for a short period of time after the page has been reloaded

Having trouble bringing in SVG file into my React project

Getting the date from an XHR header in Angular2: A step-by-step guide

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

What are the different approaches for creating a website that adapts to different screen sizes and devices

The HTTP GET request was successful, however, there is no data being displayed on the screen

Guide on extracting targeted information from a paragraph using htmlAgilitypack