Is there a way to deactivate the checkbox in an AngularJS input field?

<div ng-repeat="x in spaceutilization">
  <input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" /><label for="{{x.id}}"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />
</div>

To make it possible to disable the input checkbox based on another AngularJS input like {{x.status}}, you can modify the code as follows:

<input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" ng-disabled="x.status === 'disabled'" />

You may have attempted an approach where x.status:'disabled' resulted in outputting {{x.status}}="" within the input element, which could be due to AngularJS not recognizing this syntax correctly.

Answer №1

To disable an element based on an expression evaluation, you can use the ng-disabled="expression" directive. This directive will add a disabled attribute to the element depending on the value of the expression. For more precise attribute value evaluation, consider using the ng-attr directive.

Example:

<input type="checkbox" ng-attr-name="{{x.filenumber}}" ng-attr-id="{{x.id}}" class ="pdffiles" 
value="101SP{{x.initials}}.dwg" ng-disabled="x.status == 'disabled'"/>

If the expression x.status returns a boolean value, you can directly use ng-disabled="{{x.status}}"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can regular expressions be employed to match URLs with $urlRouterProvider in AngularJS?

My goal is to create a regex expression that matches all strings in my routing config which do not start with "/pt/" or "/en/". Additional text may be present in these strings. This is what I have so far: $urlRouterProvider.when('^(?!/(pt|en)/).*&ap ...

Calling an ajax request to view a JSON pyramid structure

My experience with ajax is limited, so I would appreciate detailed answers. I have a Pyramid application where I need to load information via ajax instead of pre-loading it due to feasibility issues. I want to retrieve the necessary information through a ...

What prevents me from displaying the image in the Bootstrap tooltip?

I am currently utilizing the Bootstrap framework v3.3.0 for my website. I'm trying to implement an image as a tool-tip when the user hovers their mouse pointer over an icon. Here is the HTML code I have: <div class="col-sm-5"> <div class= ...

Unlock the Secrets of JavaScript Key Codes

I am currently dealing with a JavaScript routine that I did not create. This routine is triggered by the onkeydown attribute of a text box in order to restrict certain keystrokes. The first argument does not seem to have any significance. The second argum ...

The functionality of Skrollr on mobile is currently not working properly due to the inability to prevent default actions

Encountering the following error on all chromium browsers while using the Skrollr library and accessing the website through mobile: "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See < ...

Using reduce() to group items in an array based on a specific object property

Creating a new array grouped by the property 'desc' of the objects within an existing array is my current task. Here is how I envision it: const sourceArray = [ { id: 'id1', sourceDesc: 'foo', prop1: 'ignoreme', p ...

Learn how to retrieve a file in Express.js using an AJAX POST request

Can you guide me on how to download a file using Express.js? This is what I have attempted on the server side: router.post('/download',function(req,res){ var file = __dirname + '/'+req.body.path; console.log(file); res. ...

What is the optimal approach for managing multiple languages using React Router version 5?

I am exploring the possibility of incorporating multiple languages into my website using React and React Router v5. Can you provide guidance on the most effective approach to achieve this? Below is a snippet of the current routing code I am working with: ...

What is the best way to store objects in files using Node.js?

As I manage my Node server, a question arises - what is the best way to convert objects into a serialized format and save them to a file? ...

I have come across this building error, what do you think is the cause of it?

My attempt to launch my company's React.js project, downloaded from Tortoise SVN, is encountering an issue. PS C:\Projects\Old EHR> yarn start yarn run v1.22.19 $ next start ready - started server on 0.0.0.0:3000, url: http://localhost:30 ...

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

Discover the flawless way to transmit client geolocation to a server. Encounter an intriguing hurdle: Unable to access undefined properties (specifically 'loc') while reading

I encountered an error that says "TypeError: Cannot read properties of undefined (reading 'loc')". This error was triggered when I attempted to pass the user's location to a server through a POST request. In my HTML file, I have included th ...

The new Date function is malfunctioning on Firefox

Could you please explain why this particular function is not functioning correctly in Firefox (V 34 latest)? It appears to be working successfully on all other browsers, but 'DatePosted' is displaying as Invalid Date. Do you have any insights on ...

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

Issues with the navigator.contacts.find function occurring when using cordova or phonegap

I am attempting to retrieve the contacts stored on a mobile device. The code snippet I am using is not functioning as expected - specifically, the navigator.contacts.find method isn't producing any outcomes. There are no error messages or success conf ...

Ways to empty an angularJS array

let itemList = ['X', 'Y', 'Z']; Even though the array is cleared, the user interface does not reflect the change. itemList = []; This method solves the issue. But why? itemList.length = 0; ...

Bootstrap is causing issues with unidentified div elements

I recently embarked on creating a slideshow using HTML, CSS, and jQuery. After completing the slideshow, I decided to add an interactive page beneath it. To streamline the layout process, I opted to utilize Bootstrap. However, upon loading Bootstrap, I en ...

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

I am in need of creating two marquees for a website project. The first marquee should showcase a repeating image while the second one should display links, both spanning the browser window at any size. It is crucial that the marquee items are displayed fro ...

Arrange items in a particular order

I need help sorting the object below by name. The desired order is 1)balloon 2)term 3)instalment. loanAdjustmentList = [ { "description": "Restructure Option", "name": "instalment", " ...

Issue with displaying Wavesurfer.js waveform in custom Shopify section

Greetings to the Stockoverflow Community, I am facing a challenge with integrating WaveSurfer.js into a customized section on my Shopify store. Even though I have successfully implemented the section, the waveform visualization is not appearing. Link to ...