When the textbox is clicked, the selectRow checkbox function will be disabled

Can someone provide me with some assistance? I am facing an issue with a table row that contains a checkbox, textbox, and some numbers.

When I click on the row, the checkbox gets checked and clicking it again will make the checkbox get unchecked. However, there is an unwanted behavior where after checking the checkbox, if I click on the textbox to enter a value, the checkbox also gets unchecked. This is not the desired outcome. I want to disable the row select function only for the textbox cell. Can anyone help me with this?

Here is the JavaScript code snippet:

function selectRow(row)
{
  var chk = row.getElementsByTagName('input')[0];
  if (!chk.disabled) {
    chk.checked = !chk.checked;
  }
}

Check out the fiddle here

Answer №1

Make sure to include the onclick="event.stopPropagation()" function in the textbox code:

<td width="30" valign="middle"><input name="Item2_quantity1" type="text"
class="tb5"placeholder="1" id="Item2_quantity1" size="1" maxlength="2" value="1"
onclick="event.stopPropagation()" /></td>

For a better understanding, check out this updated fiddle

Answer №2

When working with jQuery in a fiddle, you can utilize the following code snippet:

$("table#Item2_listing tr").click(function(e){
    if(e.target.type!=="text"){
        var chk = $(this).find('input[type=checkbox]')[0];
if (!chk.disabled) {
chk.checked = !chk.checked;
    }
    } 
});

Check out the DEMO here

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

Learning the ins and outs of manipulating arrays using jQuery

I'm currently grappling with arrays in jQuery. I have an array being returned from PHP, where I add elements to the array within a loop like this: $table_data[]= array("id"=>mysql_result($query,$i,"id"),"name"=>trim(mysql_result($query,$i,"name ...

What determines the functioning of the "N-in-one" or "pill" button effect?

I am interested in incorporating a style element known as the "pill" button, which can be found by visiting the following link: http://jqueryui.com/themeroller/ (specifically the "Choice 1 | Choice 2 | Choice 3" widget) Refer to the screenshot below: To ...

Comparing Ajax methods: Which one reigns supreme?

I am seeking advice on the best approach to handle a series of Ajax insert, update, and delete operations. Which method is more effective? Creating individual methods for each function (e.g., delete_foo, insert_foo, update_foo, delete_bar, insert_bar, ...

Using Typescript generics to enhance arrays

I am looking to extend a generic list of Array that has been previously extended from my class. How can I accomplish this in the correct way? export interface DeliveryMethod { readonly id: string; readonly company: string; readonly cost: number; re ...

Asynchronous waterfall call in Node.js to call the method before

Is it possible to invoke a previous method within async.waterfall from a subsequent method? async.waterfall([ function (callback) { }, function (reservationStatus, callback) { }, function (reservationStatusList, f ...

Display a fixed three levels of highchart Sunburst upon each click in Angular8

Looking to create a dynamic sunburst highchart that displays three levels at a time while allowing interactive drilling. For instance, if there are 5 levels, the chart should initially show the first three levels. When clicking on level 3, levels 2, 3, and ...

Enhancing React Functionality: Increasing React State Following an If Statement

Whenever I click on the start/stop button, it triggers the handlePlay function. This function then proceeds to initiate the playBeat function. In an ideal scenario, the play beat function should continuously display 1222122212221222... until I press the st ...

What is the most efficient method in Jquery to retrieve the contents of the third column in a row within an HTML table?

Recently, I encountered a situation where I needed to extract the first value from an HTML table using some code. var firstNameinFirstCol = $(this).parents('tr:first').find('td:first').text(); While this approach was successful, I now ...

Learn how to dynamically increase a counter and show it on a webpage layout whenever a fresh entry is inserted into the database in an MVC framework, all without the need

I am working on a project with a table called 'announcement'. Whenever new data is added to this table, I need the count displayed in the _layout.cshtml file from a partial view of the same table. The partial view shows the announcement's de ...

What is the best method for merging multiple Files (as File[]) into a single Blob?

Is it possible to send a POST request with a form-data body using Postman, along with the following key-value pairs? https://i.sstatic.net/VC2LYMkt.png When attempting to include multiple files, designated as File[], within a single Blob (as shown in the ...

Unable to change the color of ul.menu

I've been experimenting with different methods but I can't seem to change the color, there must be something I'm missing! How can I update the text color for all the lower links in the footer section? Here is my HTML code: <!-- Footer ...

Dragging and arranging elements outside the main container is possible with drag-and

Imagine we have a div grid for an inventory that is 128x512px. I am looking to make all the (item 64x64px) divs draggable so they can be snapped onto the grid by dragging them. Inside the inventory, the divs must also be sortable without the use of lists ...

Tips on expanding the content of a page all the way to the bottom of

Currently, I am facing an issue while working on a Joomla site where I am struggling to extend a page to the bottom of the screen. Attached is an image of the page: https://i.sstatic.net/uHZ9Q.png and below is the HTML code for the page: <div id="free_ ...

How do I initiate a custom button click event in React from an event handler in another component?

I have a unique React application that utilizes the Material UI framework for its user interface design. Specifically, I have developed a specialized button component that customizes the default Material UI button and integrates with Redux. Within the ren ...

To make the Bootstrap 4 spinner/loader gracefully disappear when the browser window has finished loading, utilize the fadeOut() or hide() function

THE GOAL My objective is to display a spinner/loader while the browser window is loading, and then have it fade or hide once the page is fully loaded. EFFORTS MADE I've attempted to use a jQuery code recommended in a different question (How to show ...

Running npm commands from the root directory while the package.json file is located elsewhere

Although I understand that it's not ideal, I am faced with a specific directory structure that cannot be changed: [projectRootDir] [src] [tests] [otherDirs] [configuration] package.json mocha.opts other files.. ...

Substitute Ajax.ActionLink with a different method

Hey there, I have an Ajax Action Link set up that is working perfectly fine. It displays some text from a partial view when the link is clicked. However, I want this text to be shown automatically when the page loads, without the need to click on the actio ...

Discovering the FindOne() model in Nodejs Sequelize comes with values that are either rounded or truncated

Running the code below, I am attempting to retrieve data from an sqlite database connected to locally. The current snippet is a test to fetch data: console.log('debug after here.'); const tag = await Tags.findOne({ where: { guild: message.guild ...

The method piSession.buildPageInteractionSession is not valid

Hey there! I am facing an issue with a simple AJAX call to a PHP file. The request should be sent to the server and return back in an HTML input field. Unfortunately, I have not been able to resolve this error so far. Below is the code snippet: HTML: ...

The GitHub Pages website is not displaying exactly like it does when running locally with a live server

Currently in the process of creating a compact website where users can input an anagram and receive all potential words that can be formed from it. Additionally, upon receiving these words, there is an option to click on one for its definitions. The site ...