Setting radio button values according to dropdown selection - a beginner's guide

I am trying to dynamically set the default values of radio buttons based on the selection made in a drop-down menu. For example, if option A or B is chosen, I want the radio button value to default to "Summary", and if option C is chosen, I want the value to default to "Detailed". Additionally, if options A and B are selected, I want the radio buttons to be non-editable. This is my first time working with radios in AngularJS, so any help would be appreciated.

main.html

<div class="row">
    <div class="form-group col-md-6 fieldHeight">
        <label for="cycleName" class="col-md-6 required">Scope Type :</label>
        <div class="col-md-6">
            <select kendo-drop-down-list k-data-text-field="'text'"
                k-option-label="'Select'" k-data-value-field="'id'"
                k-data-source="assessmentTypeOptions" name="assessmentType"
                required ng-model="riskAssessmentDTO.scopeType" id="assessmentType"
                maxlength="256" ng-change="assessmentType()"></select>
                <p class="text-danger"
                    ng-show="addAssessment.assessmentType.$touched && addAssessment.assessmentType.$error.required">Assessment
                    Type is required</p>
        </div>
    </div>
    <div class="form-group col-md-6 fieldHeight">
        <label for="assessmentType" class="col-md-5 required">Assessment Type :</label>
        <label class="radio-inline"><input type="radio"
            name="summary" id="summary" ng-value="'summary'"
            ng-model="riskAssessmentDTO.erhFlag" ng-disabled="disableAssessmentType" >Summary </label>
        <label class="radio-inline"><input type="radio"
            name="detail" id="detail" ng-value="'N'"
            ng-model="riskAssessmentDTO.erhFlag" ng-disabled="disableAssessmentType">Detailed</label>
        <p class="text-danger"
            ng-show="addAssessment.includeERHFlag.$touched && addAssessment.includeERHFlag.$error.required">Assessment
            Name is required</p>
    </div>
</div>

main.js

$scope.assessmentType = function() {
                        $scope.riskAssessmentDTO.assessmentName = '';
                        $scope.riskAssessmentDTO.erhFlag = 'Y';

                        $scope.showRefineERH = false;
                        if ($scope.riskAssessmentDTO.scopeType === 'RA_GEO_LOCAT') {
                            $scope.disableAssessmentType = true;
                            $scope.riskAssessmentDTO.erhFlag = 'summary';
                        } else if ($scope.riskAssessmentDTO.scopeType === 'RA_LEGAL_ENTITY') {
                            $scope.disableAssessmentType = true;
                            $scope.riskAssessmentDTO.erhFlag = 'summary';
                        } else if ($scope.riskAssessmentDTO.scopeType === 'RA_BUS_UNIT') {
                            $scope.disableAssessmentType = false;
                            $scope.riskAssessmentDTO.erhFlag = 'detailed';
                        } 
                    };

Answer №1

To disable Radio buttons, utilize ng-disabled and establish a scope variable such as $scope.selectedIndex to toggle between false and true.

<input type="radio" ng-disabled="selectedIndex==0">

Within the Select element, assign $scope.selectedIndex within the ng-change function by passing $index from the HTML.

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

Unable to find the element using the text "selenium webdriver"

Currently, I am working with Selenium WebDriver using Java. Log.info("Clicking on To weekrange dropdown"); JavascriptExecutor executor25 = (JavascriptExecutor)driver; executor25.executeScript("document.getElementById('toWeekYear).style.display=' ...

An easy way to place text along the border of an input field in a React JS application using CSS

I am struggling to figure out how to create an input box with text on the border like the one shown in the image below using CSS. I have searched extensively but have not been able to find any solutions to achieve this effect. I attempted using <input&g ...

Using JavaScript within WordPress to achieve a seamless scrolling effect

I am seeking to implement a Smooth Scroll effect on my website located at . The site is built on WordPress and I am facing difficulty in connecting JavaScript/jQuery in WordPress. I have come across various WordPress plugins, but they either do not meet my ...

What is the best way to connect a fresh post to a different URL in ReactJS and Redux?

Currently, I am working with Redux and ReactJS to develop a discussion platform. One of the key features I am trying to implement is where users can input the title and content of their post, which will then be submitted to create a new post. After submit ...

Utilize Javascript or Jquery to intercept and handle both GET and POST requests

Is there a method to effectively intercept and capture both GET and POST requests as they are sent from the browser to the server? In my web application, full page refreshes occur after each request is submitted, however, some pages experience delays in r ...

What is the best method to find a matching property in one array from another?

I am working with two arrays in TypeScript. The first one is a products array containing objects with product names and IDs, like this: const products = [ { product: 'prod_aaa', name: 'Starter' }, { product: 'prod_bbb&apos ...

When you click on the "email" link, the Email app will automatically launch

Is there a way I can make the "EMAIL" text clickable in HTML, so that it automatically opens an email app or site and inserts the clicked email into the "To:" field? ...

Encountered an issue while attempting to deploy my app on Heroku: received the error message "The requested resource does not have the 'Access-Control-Allow-Origin' header"

Hi fellow developers, I'm currently facing an issue while trying to upload a simple app to my Herokuapp. Every time I attempt to log in or sign up and establish a connection with the back-end, I encounter the following CORS error: "Access to fetch at ...

NextJS not maintaining state for current user in Firebase

I'm working on an app utilizing firebase and nextjs. I've set up a login page, but when I try to retrieve the current user, it returns undefined. This issue began a few days ago while working in react native as well - initially, it was related to ...

Having trouble uploading an image with Angular's HttpClient

Uploading an image using native fetch POST method works perfectly: let formData = new FormData(); formData.append('file', event.target.files[0]); console.log(event.target.files[0]); fetch('http://localhost:8080/file/ ...

Acquiring POST parameters within Laravel's Controller from JavaScript or Vue transmission

I am trying to send Form data from a Vue component to a Laravel API using the POST method. Although Laravel is returning a successful response, I am encountering difficulty in handling the POST data within the Laravel controller. Below is the code for th ...

Preventing Background Scrolling While Modal is Open in React - Using 'position: fixed' causes the page to unexpectedly scroll back to the top

Currently working on a React website where users can scroll through various posts on the homepage. Each post includes a '...' menu that, when clicked, opens up a modal with additional options. In order to prevent the background from scrolling w ...

Steps for initializing input field with pre-existing values using Redux form

After reviewing the Redux Form documentation, I noticed that the example provided only fetches initial values upon button click. However, my requirement is to have these values available immediately when the page loads. In my current setup, I can successf ...

Finding the label that is linked to the current DIV or textarea by its "for" property

I am working on a project that involves two elements - a textarea and a div. Each element has a label attached to it using the "for" attribute in HTML. <textarea id="txta_1" class="txta" cols="40" rows="3" onkeyup ...

Enhancing Bootstrap Date Picker with Custom Buttons: A Tutorial

I am attempting to enhance the datepicker functionality by including a custom button, similar to the today button. My goal is to insert a button at the bottom of the calendar each month. This button will be named "End of the month" and will display the c ...

AngularJS is capable of executing conditional logic using the if/else statement

I am attempting to set the inputLanguage value to 'en' and encountering an error that says english is not defined. Here is the code snippet from my alchemy.js file: module.exports = function(Alchemy) { Alchemy.language = function(inText, inp ...

Update a single javascript variable on every rotation of the Bootstrap carousel

Within my website, I have implemented a popin/modal feature using Hubspot Messenger which includes a Bootstrap 3 carousel. Each slide of the carousel displays a different "social embed" such as Facebook or Twitter, and I am looking to adjust the width of t ...

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Is there a way to retrieve the center anchor point position (x, y) of the user's selection relative to the document or window? I have tried using window.getSelection() to get selected nodes, but I am unsure how to obtain their position: See an examp ...

Enhance your jQuery experience by customizing the .click function

When designing my website, I wanted it to be functional on both touch devices and desktops that do not have touch capabilities. To ensure a smooth user experience on touch devices, I implemented the tappy library to eliminate the 300ms delay on jQuery .cli ...

Delivering create-react-app's build files through an express server

I am trying to serve the build files of my React app on another Express application. I have copied all the static files from the build folder to the public folder inside my Express application and have set up the following code: app.use(express.static(pat ...