Disabling multiple textboxes in an array when any one of them has a value entered

Is there a way to automatically disable all text boxes if any one of them has a value? I have an array of cost types and their associated costs. If a cost is entered for any type, all other text boxes for cost types should be disabled. If no cost is entered, all text fields should remain editable. I've attempted to use the following code without success.

function stoppedTyping(iVal){
        var costs=document.getElementsByName("cost")[iVal].value;
        if(costs > 0) { 
        document.getElementById("cost_" + iVal).disabled=true;
        } else { 
                document.getElementById("cost_" + iVal).disabled=false;
        }
    }

<td colspan="4">
         <input type="text" size="10"  maxlength="8" name="cost" id="cost_<c:out value="${y}"/>"  value="<c:out value="${costDto.cost}"/>" 
                        onBlur=" stoppedTyping(<c:out value="${y}"/>)"; "/>
                       </td>

Answer №1

One way to solve this is by verifying the length of the input value:

var price = document.getElementsByName("price")[iVal].value;

if(price.length > 0) { 

}

Alternatively, you can make it more concise:

var price = document.getElementsByName("price")[iVal].value;
document.getElementById("price_" + iVal).disabled = price.length > 0;

Answer №2

Make sure to include the following code in your script:

$('.enableToggle').on('input', function(){
    var valuePresent = $(this).val().replace(/\s+/g,'').length > 0;
    $(this).siblings('.enableToggle').prop('disabled', valuePresent);
});

Also, remember to assign the class="enableToggle" to all input fields in your form.

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

"What is the best way to retrieve the value of a div element with jquery

Attempting to retrieve the value of a div using jQuery in Chrome console from this HTML: <div class="col-md-3"> <div class="vou-col" style="cursor: pointer"> <h4>Free Large Bucket</h4> <span class="sku-info">Voucher ...

Passing the $scope variable between functions

Here is the function in my angular controller: $scope.selectinteresteduser = function(Id){ $scope.selecteduserid = Id; } $scope.sendMessageToEmployeer = function($scope.selecteduserid) { alert($scope.selecteduserid); } I am looking for a way to pa ...

The response from Moment.js shows the date as "December 31, 1969."

Currently, I am in the process of recreating one of FCC's backend projects: Upon testing my code, I noticed that when I input the following URL: http://localhost:3000/1 The result is as follows: {"unix":"1","natural":"December 31, 1969"} var e ...

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

A Step-by-Step Guide to Downloading Images by Clicking

Having an issue with my image download code. When I try to download an image, the process starts but doesn't complete and no file is received. Instead, a type error is encountered. <html> <head> <script type="text/javascript"> funct ...

Accessing the app module in separate files is not possible for Angular and Coffeescript

As I work on managing and refactoring my Angular code in a Rails project with CoffeeScript, I am facing issues accessing Angular objects between multiple files. Here is the current file structure: javascripts |-Angular |-controllers | |-search_strl.js ...

Modify one individual css style / tag

Currently, I have a large React application that is utilizing Material UI 4.3.0. I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js ...

What is the significance of receiving an error in Internet Explorer when running the code below?

function checkStepValidity(isValid, dataModel) { if (isValid) { updatedDataModel = mergeObjects(this.updatedDataModel, dataModel); } }, The code above encounters the following error in Internet Explorer / Edge browse ...

"Exploring the world of Ionic 2: uncovering its public variables

I'm facing an issue with Ionic 2, specifically with Angular. My concern revolves around a variable called "isConnected". I am unable to access it from an internal function within a function as it gives me an error saying "can't define property of ...

Updating a dataview inside a Panel in extjs 3.4

I am facing an issue with my extjs Panel component that includes a dataview item. Initially, it works perfectly fine in displaying images from a store. However, upon reloading the imgStore with new image URLs (triggered by a user search for a different cit ...

Guide to dynamically setting the title and background color of the navigation bar in React Navigation 5

In my current project, I am utilizing React Navigation Bar version 5 and have successfully set the title in App.js. However, I now need to change this title dynamically when the screen is rendered. I attempted to use this.props.navigation.navigate('Ex ...

Creating interactive user interface components in Android

Seeking advice on creating dynamic UI elements in Android using Java. I am interested in incorporating a thermometer feature into my app that will display a red bar reflecting external data. https://i.sstatic.net/hHv7H.png. How would I go about implementi ...

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

I am defining an enumeration called ApiFunctions with values like "HIDE", "SET_READ_ONLY", and "DESCRIPTION". Also, I have a type ValueOfApiFunction that should include all values of ApiFunctions. Additionally, I have a logic that listens for messages on ...

The send_keys() function in Selenium version 3.141.0 works perfectly on Windows, but unfortunately, it is not functioning correctly on Linux Debian 11

I've been experimenting with web automation using Selenium. Everything was running smoothly until I updated my packages - now the send_keys() method isn't functioning on Linux, but it's working fine on Windows with the same versions. I&apo ...

To trigger OnClick events in Next.js SSG, you will need to double click the element for it to run properly

There seems to be an issue where elements with an onClick event listener require a second click to run. It appears that the state is not updating on the initial click, causing this behavior. This problem may be related to using getStaticProps() for SSG on ...

Checking for file existence using the HEAD command can be done by specifying the file path as

I am seeking to utilize the Spring Endpoint provided below for file uploading. @PostMapping(value = "/upload", produces = { MediaType.APPLICATION_JSON_VALUE }) public ResponseEntity<StringResponseDTO> uploadFile(@RequestParam("file") MultipartFi ...

What is the best method to access an element with Vue.js?

I currently have a form set up like this <form v-on:submit.prevent="save_data(this)"></form> and a method defined in Vue.js like this methods: { save_data: function(f){ } } In jQuery, we can access the form using $(f)[0] My question ...

Fetching images stored on an external website and loading them into an iframe within an Electron application

I am contemplating turning my website into a desktop application using either an iframe or webview within an Electron app. My website contains numerous images that I wish to cache in the Electron app to prevent repeated downloads. Is it possible to access ...

How to Retrieve URL Before Closing a jQuery Window Using window.open()?

Is it feasible to retrieve the URL of a window.open window after triggering a window.close event when the user clicks the close button? How can I obtain the last URL visited right before the window closes? ...

Error encountered when attempting to upload an attachment in Sharepoint, resulting in a

Whenever I attempt to upload multiple attachments to my list, I encounter a 'save conflict' error. It seems that Sharepoint is still processing the previous attachment when a new one is submitted. I believe that introducing a delay before sendin ...