JavaScript code to allow two textboxes to be enabled at the same time when a checkbox is

One question I have regarding the code snippet below :

<input id="myCheckBox" type="checkbox" name="alamatCat" 
       onClick="apply(this.checked, 'textBox3', 'textBox4')"> OT Date
</td>
<td>
From <input  id="textBox3" type="text" name="alamat" disabled="disabled"> 
To <input id="textBox4" type="text" name="alamat" disabled="disabled">

The objective is to enable both textboxes when the checkbox is clicked.

Any recommendations on how to achieve this?

Proposed solution :

What if we use the following JavaScript :

<script language="javascript">
function enableDisable(bEnable, textBoxID)
{
     document.getElementById(textBoxID).disabled = !bEnable
}

Answer №1

function adjustTextbox(isSelected){
    document.getElementById('textBox3').disabled = isSelected ? "" : "disabled";
    document.getElementById('textBox4').disabled = isSelected ? "" : "disabled";
}

<input id="myCheckBox" type="checkbox" name="addressCategory" 
       onchange="adjustTextbox(this.checked);" />

Please note that using inline code is outdated.

You can opt to use addEventHandler instead:

document.getElementById('myCheckBox').addEventHandler('change', adjustTextbox);

Remember to update the function as follows:

function `adjustTextbox`(){
    var disableAttribute = this.checked ? "" : "disabled";
    document.getElementById('textBox3').disabled = disableAttribute;
    document.getElementById('textBox4').disabled = disableAttribute;
}

Keep in mind that for Internet Explorer versions below 9, you will need to utilize attachEvent. For more information, refer to MDN

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

Update the WooCommerce shopping cart page automatically upon product removal

After trying to solve the issue of refreshing the cart page in WooCommerce when a product is removed, I came across this helpful question on Stack Overflow: Refresh the page after product remove from cart Woocommerce. Following the provided code snippet th ...

Inconsistency found in Ajax DataTable data updates

Incorporating a DataTable ajax feature, I pass values to the controller. Here is a simplified version of the code: $(function() { $("#tableDiv").hide(); $("#submitDateFilters").on("click", function() { displayData(); $("#tableDiv").show(); ...

The attribute 'positive_rule' is not found within the structure '{ addMore(): void; remove(index: any): void;'

data() { return { positive_rule: [ { positive_rule: "", }, ], }; }, methods: { addMore() { this.positive_rule.push({ positive_rule: "", }); }, ...

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

This is the layout of my table. Here is the result I'm getting. Below is the code snippet: <table width="100%" id="controltable" border="1"> <tr> <th> Product Name </th> <th> Product Pri ...

How can I calculate the width of a character in an HTML5 canvas?

When using the .fillText function with a fixed-width font, I can easily adjust the height by setting the .font property. However, is there a way to accurately determine the width of an individual character? ...

What steps can I take to create a textbox that expands as more text is

Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...

Avoid transitioning to a different page using Vue-router

I have recently ventured into the world of Vue.js and my current project involves fetching data from an API, implementing pagination, and creating a detailed view for each post upon clicking. I have successfully implemented the pagination feature, however, ...

Setting up Spectron

I attempted to install Spectron using the following command: npm install --save-dev spectron However, I encountered the following error message: npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\P ...

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

I am attempting to pass different data to my other component. Essentially, when my variable firstvalue is not null, I want to send firstvalue. Currently, this setup is functioning as expected. However, I now wish to send secondvalue if it is not null. < ...

"Error 404: The file you are looking for cannot be found on [custom company domain]. Please check

My attempts to retrieve a Google Drive file using its file ID with a service account in NodeJS have been unsuccessful. The requests are failing with an error indicating a lack of access: code: 404, errors: [ { message: 'File not found: X ...

What is causing the bullets for the unordered list to appear before the items are inserted into the list?

Can you explain why the bullets are showing up before the list items are added? <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>To Do List</title> </head> <body> ...

When AJAX is invoked, the HTML content fails to display within a div

The following is the ajax script I am currently utilizing: mypage.php $(".sales_anchor").click(function(e) { e.preventDefault(); var store_username = $("#storeUsername").val(); var store_id = $("#storeID").val(); var sale_id = $(this).a ...

Error: ReactJs unable to find location

I'm attempting to update the status of the current page when it loads... const navigation = \[ { name: "Dashboard", href: "/dashboard", current: false }, { name: "Team", href: "/dashboard/team", current: fa ...

tips for asynchronously loading cloud endpoints APIs

gapi.client.load('myapi1', 'v1', function() { gapi.client.load('myapi2', 'v1', function() { gapi.client.load('myapi3', 'v1', function() { $rootscope.$broadcast( ...

Is there a way to make an HTML link target the same as JavaScript window.opener?

Within my project, the main page is where users log in and access the primary tables. Additionally, there are numerous supplementary pages that open in separate windows. Once the login session times out, it is essential to restrict user access to any cont ...

How to extract a section of a string with AngularJS

Can someone help me figure out how to remove the last part of a string in order to obtain just the main word? For example, turning string(1) into string. Any suggestions would be appreciated! PS. Note that the string might look like this: sringggg(125). ...

Leverage the power of Signal R through React with aspnet/signalr integration

I found a helpful resource for incorporating SignalR into react, which you can check out here. However, it seems that the code provided does not align with current standards. The @aspnet/signalr-client has been marked as obsolete and now we are required t ...

There was a problem establishing a WebSocket connection to 'ws://127.0.0.1:2000/'. The attempt failed with the following error: net::ERR_CONNECTION_REFUSED

I have integrated websocket functionality using a repository found at https://github.com/kishor10d/CodeIgniter-Ratchet-Websocket After successfully testing the websocket on my local environment, I encountered issues when uploading the files to the live se ...

Ways to retrieve JSON data using Angular JS

I'm currently working on populating my table with data. The URL returns JSON data, but I'm struggling with how to retrieve it using AngularJS. Here is my services.js: angular.module('OrganisatieApp.services', []) .factory('organi ...

React is throwing an error message stating that setCount is not a valid function

Getting an error saying setCount is not a function. I am new to this, please help. import React, { memo, useState } from "react"; export const Container = memo(function Container() { const { count, setCount } = useState(0); return ( ...