How to set textboxes as read-only depending on the drop-down choice?

After developing some scripts to automatically populate the data-length and data-width in textboxes based on a dropdown selection, I now face the challenge of making the .width and .length textboxes readonly depending on the selected dropdown option.

Is there a way to modify the code below to achieve this functionality?

$(document).ready(function() {
    $('select.cargo_type').change(function() {
        var eur1width = $('select.cargo_type').find(':selected').data('width');
        $('.width').val(eur1width);

        //make width textbox readonly

        var eur1length = $('select.cargo_type').find(':selected').data('length');
        $('.length').val(eur1length);

        //make length textbox readonly
    });
});

Answer №1

If you want to make a textbox uneditable, you can utilize the prop method.

$('.width').val(eur1width).prop('readonly', true);

$('.length').val(eur1length).prop('readonly', true);

To allow editing again, simply set the readonly property to false:

$('.width').val(eur1width).prop('readonly', false);

$('.length').val(eur1length).prop('readonly', false);

UPDATE

if (eur1width == 'myVal') {
    $('.width').val(eur1width).prop('readonly', true);
} else {
    $('.width').val(eur1width).prop('readonly', false);
}

Answer №2

To make an element read-only or undo the read-only status, you can use the prop('readonly',true/false); method.

if(eur1width == 'checking_val'){
   $('.width').val(eur1width).prop('readonly', true);
}else{
   $('.width').val(eur1width).prop('readonly', false);
}

Alternatively,

If you want to toggle the read-only property:

   $('.width').val(eur1width).prop('readonly', !$(this).prop('readonly'));

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

Array data causes tabs to be shown incorrectly

My attempt to create tabs similar to those in this tutorial has hit a snag. While I can easily display hard coded tabs, I'm facing issues when trying to populate the tabs from a list as they end up being displayed incorrectly. Here is the code and im ...

What is the process for loading an external file within an npm script?

Objective: Testing the linting process of specific components within the source code, without affecting all files. I want to streamline the linting process by running a single command that covers multiple folders specified in a configuration file: //pack ...

jQuery's event delegation feature fails to work in conjunction with AJAX requests

I'm currently facing issues with jQuery's on event delegation: Below is the code snippet I am working with: HTML portion: <body> <!-- Page Content Wrapper--> <div id="sb-site"> <div id="overlay">& ...

Encountering challenges when adjusting height based on screen size in Angular 6

Utilizing HostListener to adjust the height based on screen size works well. However, during page load, "event.target.innerHeight" returns undefined until the browser height is changed. To address this issue, the value needs to be initialized. Initially, i ...

Incorrect pathing in express.js

I've encountered an issue with my filter while attempting to redirect packages using two express.js routes: app.get('/billdetails/:year/:month/:phoneId', function (req, res, next) { var db = req.db; var year = req.params.year; v ...

Missing HTML escape sequences following conversion to a string

The Android test was successfully run using the following code: public static void test() { String text="<html>" + "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\" /> ...

What are the steps to add 8 columns to the second row in my table?

this is an example of HTML code that showcases a table structure with multiple rows and columns. You can view the full code snippet here. The table includes different sections, such as section1, section2, section3, and section4 in the first row (tr). In t ...

Creating dynamic canvas elements with images using HTML and JavaScript

Currently, I am working on a unique project involving a canvas filled with dynamic moving balls. This project is an extension or inspired by the codepen project located at: https://codepen.io/zetyler/pen/LergVR. The basic concept of this project remains t ...

The Model.function method is not a valid function that can be used within a router

Currently facing a challenge with my router setup. I have exported the function as shown in the code snippet below. This is the Model I am using: "use strict"; var mongoose = require('mongoose'); var bcrypt = require("bcryptjs"); var Schema = m ...

What location is ideal for making API calls with React and Redux-thunk?

After extensively searching on StackOverflow.com and across the internet, I couldn't find a similar question. Therefore, please refrain from giving negative reputations if you happen to come across one as I truly need reputation at this point in my li ...

Tips for implementing multiple selectors in YUI

Is there a way to use multiple selectors in YUI (YUI 2) similar to jQuery? $('h1, h2, el1, el2, .content, .title').css('color', 'red'); How can I achieve the same in YUI without having to individually add classes using YAHOO ...

Implementing an event handler within a functional component using hooks in React

I'm currently exploring functional components and hooks. I have a component that retrieves an array of quotes from an API and is supposed to randomly select one to pass as a prop to a child component named "Quote". import React, {useState, useEffect} ...

How can we consolidate an array of objects containing 6 keys into fewer keys?

Apologies for any confusion caused by the title. As a newcomer to JavaScript, I may not be able to articulate exactly what I am trying to achieve. Hence, I will showcase my code and explain the desired outcome instead. Here is an array of objects I am wor ...

Signing off from GitHub Packages for npm

As I work on a project that utilizes a private GitHub package, I have been using it locally with the command npm login --registry=https://npm.pkg.github.com. However, this approach has posed problems when attempting to deploy the project in a production en ...

Inside the function() in angular 2, the value of 'this' is not defined

I've integrated a UIkit confirmation modal into my app. However, I'm encountering an issue when trying to click the <button> for confirmation. The this inside the function is showing up as undefined. Here's the snippet of code in quest ...

My online platform appears fine across all browsers except for Firefox

It seems that different browsers are displaying my website differently. Chrome, Safari, and Opera show it without any issues, but Firefox removes the top section, including the menu, and replaces it with white space in the center. I'm not sure what&ap ...

"Exploring the concept of odd and even numbers within the ng-repeat

Can anyone help me with detecting odd or even numbers in an ng-repeat? I have created a fiddle that displays some dots randomly showing and hiding. Now, I want to change the background color so that odd numbers are green and even numbers are red. function ...

Implementing the onClick function for the correct functionality in a ReactJS map component

I have designed a mockup and now I am trying to bring it to life by creating a real component. View my component mockup here Starting with something simple, I created 3 buttons and an array. However, when I click on any button, all features are displayed ...

What causes a horizontal line to form when a user enters white space?

I have written a piece of code which seems to be causing an issue when running it. Whenever I input empty spaces, it results in creating a horizontal line. import React, { Component } from 'react'; export default class App extends Component { co ...

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...