Is it possible to deactivate all parent and child elements if a single parent element is chosen?

In the initial scenario, I managed to disable all parent elements except for the currently selected one.

This code snippet is from checkbox.js:

if (geoLocation.id === 5657){
    var getParent = geoLocation.parent();
    $.each(geoLocation.parent(),function(index,location) {
        if (location.id !== geoLocation.id) {
            var disableItemId = 'disabled' + location.id;
            // Get the model
            var model = $parse(disableItemId);
            // Assign a value to it
            model.assign($scope, true);
        }
    });

Now, I am attempting to disable all child elements for parents that were disabled in the previous step. How can I accomplish this with the following code? Any assistance would be greatly appreciated.

This is what I have tried so far...

$.each(geoLocation.parent().items,function(index,location) {
    if(location.id !== geoLocation.id){
        var disableItemId = 'disabled' + location.children.data;
        // Get the model
        var model = $parse(disableItemId);
        // Assign a value to it
        model.assign($scope, true);
    }
});

console.log(getParent);

Answer №1

If angular is your framework of choice, it's recommended to organize everything in a model structure and utilize ng-click and ng-disabled for the desired functionality.

Example Template:

<ul>
  <li ng-repeat="item in checkboxes">
    <input type="checkbox" ng-disabled="item.disabled" ng-click="disableOthers(item)"> {{item.name}}
  </li>
</ul>

Sample Controller Function:

$scope.disableOthers = function (item) {
  // Logic to disable related items
};

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

AngularJS: retain data until resources are fully loaded

As someone who is brand new to the $resource, I am unsure of how to effectively utilize it. (though this example code is not real, it serves a similar purpose) service: .factory('User', function ($resource) { return $resource(apiPa ...

Incorporating a fresh attribute into a javascript object

We start with an array that includes the following data structure: array = [{ key: '2001', values: [ { id : '123a', points: 3, hours: 3 }, { id : '123a', points: 4, hours: 2 }, { id : '4444', points: 3, hour ...

Tips for successfully passing store state as a prop in React-Redux with TypeScript

Having trouble passing information from the initial state of the store to a component where it's supposed to be rendered. Despite a console.log in the component showing that it's undefined, there doesn't seem to be any issue with the initial ...

Transform a string into an object containing duplicate keys by converting them into an array

I need to convert a string into an object, but the string contains duplicated items. JSON Objects cannot have two items with the same key, so the second item is replacing the first one. How can I merge the duplicates and push them to an array? var string = ...

What are the steps for removing a user from Amazon Cognito?

I am looking to delete a cognito user using my nodejs application. For example: cognitoUser.deleteUser (err, result) -> if err reject err resolve result Whenever I attempt to delete a cognito user, an error is thrown as shown below Error: U ...

What is the best way to use a background image with Next.js?

I'm currently facing an issue while attempting to set a background image using Next.js. Unfortunately, my attempts have been unsuccessful as the image is not appearing: // globals.css body { background: url("/images/grid.svg") repeat; } ...

Exploring Vue JS: A guide to using the onChange event to dynamically update input values

I am currently utilizing the npm package vue-range-component to adjust values via a slider, which then dynamically updates in the input field. However, I'm encountering an issue with applying the onChange event for inputs. I need to have the ability ...

"During the Angular Controller operation, the variable $scope.fId is displaying a

I need help using the input value fId in my Angular controller FollowBtnCtrl. I have created a button that calls the followMe() function, which is defined inside the FollowBtnCtrl controller. However, when I try to access the $scope.fId value within the co ...

"Hidden panels in Sencha Touch only respond to show() and hide() methods after a resize event

Check out this demonstration of a Sencha Touch app by visiting this link. The button located in the bottom-left corner is supposed to show or hide the menu panel on top of the "Location info goes here" bar, but it seems to be functioning in an unexpected m ...

Looking to utilize vue.js to alter the color of the <li> element when a select option is chosen

I'm a beginner in vue.js and I'm attempting to change the background color by using the select option. Despite trying the cueCardsColor method, nothing seems to be happening. <ul> <li :class="+ cueCardColor"> <sele ...

async.series: flexible number of functions

Hello everyone, I'm currently working with Node.js (Express) and MongoDB (mongooseJS). My goal is to create a series of async functions that query the database in the right order. Here is my question: How do I go about creating a variable number of a ...

How to drag an item onto another element using Vue.Draggable without the need for adding or removing

Are you familiar with the library https://github.com/SortableJS/Vue.Draggable? I am trying to achieve a drag and drop functionality where I can drag a file into a folder. However, I am facing an issue as the @change event only provides data about the drag ...

Tips for editing events in the "react-big-calendars" component

I am looking to implement a feature where users can click on events in a calendar and then edit either the dates or event titles. Can this functionality be achieved using "react-big-calendar"? If not, are there any other packages you can recommend? <Cal ...

Transfer information from PHP to JavaScript across distinct files

In my website, I have several files including login.php, main.php, functions_js.js and functions_php.php. The login.php file retrieves two variables that I need to pass to the functions_php.php file via AJAX. In functions_php.php, I execute a SELECT query ...

"Automate the process of manual content duplication with JavaScript's for each replacement

Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...

encountering a problem with npm while trying to execute the project

Encountering a persistent issue when attempting to run my project with npm start, even after downgrading my node version. Despite trying various solutions found on platforms like stackoverflow and stackexchange, such as deleting the node_modules folder, ru ...

The rendering of the component is experiencing issues when using react-router

function App() { return ( //Following BEM naming convention <div className="app"> <div className="app__body"> <Sidebar /> <Chat /> <Router> <Routes> ...

Using JavaScript to Transfer Data Between Web Pages

For our landing page, we're planning to incorporate two levels of questions for the respondents. Initially, the respondents will be asked to choose up to four interest tracks using checkboxes. Once they have made their selections, they can proceed to ...

How can we reduce the size of a JSON object in Typescript before sending it to the client?

Currently, I am faced with a common challenge. I have a database object that is a standard JS object originating from a document database, and my goal is to transmit this object to the client. However, certain fields contain sensitive information that shou ...

Angular JS allows you to easily remove the # symbol from a URL, improving the

I am encountering a problem with the "#" symbol in my angular js website's URL. I need to remove the # from the URL but the method provided isn't working and the site is not displaying properly. Can someone advise me on how to successfully remove ...