Activating/Deactivating Textbox on Internet Explorer 9 using Javascript

It can't be due to browser discrepancies because I also tested it in Chrome. Is there possibly an error in my code? The checkbox is supposed to disable the textbox when clicked, but that's not happening. Here is the code I am using: I placed the script at the top of the page's section.

Form name : frmPost

 <script type="text/javascript">
      function enabledisable() {
                if (document.getElementById("ePrice").checked) {    
                    document.frmPost.txtPrice.disabled=false;
                } else {
                    document.frmPost.txtPrice.disabled=true;
                }
            }​
    </script>

<input type="text" name="txtPrice" id="txtPrice" size="5">
<input type="checkbox" id="ePrice" name="ePrice"  onclick="enabledisable()"/>
javascriptwebcheckbox

Answer №1

Tested on IE9, Chrome, and Firefox

 <script type="text/javascript">
      function toggleInput() {
                if (document.getElementById("ePrice").checked) {    
                    document.formPost.priceField.disabled = false;
                } else {
                    document.formPost.priceField.disabled = true;
                }
            }
    </script>
<form name="formPost">
<input type="text" name="priceField" id="txtPrice" size="5" disabled="disabled">
<input type="checkbox" id="ePrice" name="ePrice"  onclick="toggleInput()"/>
</form>

Everything looks good. Are you certain that your form is named as formPost? Also, I suggest setting the txtPrice input to be disabled by default

Answer №2

<input type="text" id="txtPrice" name="txtPrice" size="5">
<input type="checkbox" id="ePrice" name="ePrice"/>

$("input[name='ePrice']").click(function() {
    $("input[name='txtPrice']").attr("disabled", this.checked);
 });

Here's the latest update:

Link to the updated version

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

Styling with CSS: A guide to reducing paragraph margins within a div element

My current project involves using javascript to dynamically insert paragraphs inside a div element. Essentially, the script grabs the value entered into an input form when a button is clicked and adds it as a new paragraph within a specific div. However, I ...

javascripthtmlcssmarginappendchild

JavaScript Selenium code encountering an "Element not interactable" error with input textbox element

Currently, I am attempting to utilize Selenium in order to automate inputting a location into the search bar on weather.com. Initially, I wrote the code in Python and it seems to be functioning properly: // this works driver = webdriver.Chrome(ChromeDriver ...

javascriptpythonseleniumgetelementbyid

Angular Firebase Authentication: Simplifying User Authentication in Angular Apps

Tools I'm Utilizing Angular 5 AngularFire5 Firebase & Firestore Objective I am working on developing a straightforward authentication/login and registration system. While I have already created one, I am facing some challenges and seeking the ...

javascriptfirebasefirebase-authenticationangularfire2angular5

Waiting for Selenium in Javascript

I'm having trouble using Selenium Webdriver with Node.js to scrape Google Finance pages. The driver.wait function is not behaving as expected. I've configured my Mocha timeout at 10 seconds and the driver.wait timeout at 9 seconds. The test passe ...

javascriptnode.jsselenium

Vue - receiving the output of a synchronous function

I'm having difficulty displaying the synchronous results of the method provided below. I am invoking the method from another method: var result = this.getVendor(id) console.log(result) Below is the fetch method code: methods: { async getData(i ...

javascriptvue.jsvuejs2

Guide on utilizing isElementPresent/isPresent within ng-repeat with Protractor

HTML Code: <div ng-repeat="todo in todos"> <span><input ng-model="todo.title" /></span> <span><input ng-model="todo.time" /></span> <span><input ng-model="todo.name" /></span ...

javascriptangularjsseleniumtestingprotractor

What is the best way to modify the properties of an object as soon as a specific condition is satisfied

I'm currently working on enabling a button transition from .disabled = true to .disabled = false. My project involves creating a Yahtzee game clone for entertainment, where players need to select a score to keep after their third roll. Once that choic ...

javascript

Is it possible to include additional transformations to a div element?

Is it possible to add additional rotation to a div that already has a transform applied? For example, can I do the following: <div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv">< ...

javascriptjqueryhtmlcsstransform

What could be the reason why readyState is not equal to 4?

I've been trying to figure out how to use Ajax to fetch data from a database, but I'm encountering some issues... The problem arises when I submit the query and nothing appears on the screen... I understand that this issue is related to the read ...

javascriptphpajaxdebuggingreadystate

karma plugin dependencies could not be located

Every time I execute karma start, the following issues arise: C:\devl\JS\myProject>karma start 06 09 2015 11:30:19.133:WARN [plugin]: Cannot find plugin "karma-chrome-launcher". Did you forget to install it ? npm install karma-chrome ...

javascriptnode.jsnpmkarma-runner

Invoke a controller in Prestashop by utilizing AJAX technology

I am struggling to figure out how to call the method / function in my controller. The controller is named TestController.php, and I also have files named Test.tpl and Test.js. Additionally, I am unsure of what to put in the URL field. My goal is to retrie ...

javascriptphpjqueryajaxprestashop

Creating flexible Vue routes using a single router component and a navigational menu

I am working on a Vue project and I want to implement nested routes in my router.js. My goal is to have just one menu for all the nested routes and only one <router-view></router-view> in a master component. This is what I envision (in pseudoc ...

javascriptvue.jsvue-router

Responsive React Page Design with Swiper's Breakpoints (Bootstrap Integrated)

I have integrated Swiper React with my React project. It seems that I cannot manipulate the 'slides per view' using Bootstrap directly. If it were possible, I would define the necessary columns and insert the swiper slides within them. Currently ...

javascriptreactjsbreakpointsbootstrap-5swiper.js

Troubleshooting your Meteor App on Nitrous.io with server-side debugging

I currently have a basic Meteor application up and running on a Nitrous box. I am interested in utilizing node-inspector for debugging the server-side part of my app, but I'm facing difficulty accessing the console as detailed here. The Meteor app is ...

javascriptnode.jsmeteornitrousionode-inspector

Problem with JQuery draggable and droppable appending elements

I am looking to create a functionality where a div can be dragged into another droppable div and be contained within it, while still remaining draggable inside the droppable div. However, When I try to drag the div into the droppable area, it seems to be ...

javascriptjqueryjquery-uidroppable

Retrieve an object using a variable

Essentially, my question is how to extract a value from a variable and input it into a sequence. Being Dutch, I struggle to articulate this query correctly. var channelname = msg.channel.name; "description": `${config.ticketlist.channelname.ticketmessage} ...

javascriptjsonnode.jsdiscorddiscord.js

NuxtLink sending users to incorrect destination URL

I am facing an issue with my static generated Nuxt site. Everything works perfectly fine when I host it locally, but once I load it on GitHub Pages, the NuxtLink elements' hrefs are incorrect. For instance, one of my links looks like this: <NuxtLi ...

javascripthtmlvue.jsnuxt.js

The data set in a setTimeout is not causing the Angular4 view to update as expected

I am currently working on updating a progress bar while importing data. To achieve this, I have implemented a delay of one second for each record during the import process. Although this may not be the most efficient method, it serves its purpose since thi ...

javascriptangulartypescript

What could be causing the unexpected behavior of TypeScript in Visual Studio Code?

VSCode is showing errors, but everything is functioning properly. Here are some of the errors: Type expected. [ { "resource": "/C:/Users/Dell/Desktop/vite-project/src/App.tsx", "owner": "typescript", "code": "1110", "se ...

javascriptreactjstypescriptvisual-studio-code

The data contained in the Response is an extensive script instead of the intended JSON object

Currently, I am in the process of developing a web application using Laravel and Vue.js. In order to retrieve a list of users, I have implemented an axios GET request. However, the response I am receiving is in the form of a Promise object, which I have le ...

javascriptphplaravelvue.js