Ways to use jQuery to disable row form elements in the second and third columns

I need a way to deactivate form elements in the second and third columns, starting from the second row until the nth row using a jQuery selector.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
  <thead>
    <tr class="warning">
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
  </tbody>
</table>

Here is an example of the desired layout:

The goal is to disable rows with form elements in the specified columns up to the nth row.

An important requirement is that when button 1 is clicked, it enables the second row, then when the second button is clicked, it enables the third row, and so on...

javascriptjqueryhtmlcss

Answer №1

Give this a shot:

$('.table > tbody tr:not(:first)').find('input,select,button').prop("disabled", true);



Alternatively, you could try this better method:

var leaveTr= '1';
$('.table > tbody tr').not(':eq('+leaveTr+')').find('input,select,button').prop("disabled", true);




$('.table > tbody tr').not(':eq(0)').find('input,select,button').prop("disabled", true);

Answer №2

If you're looking to create a form where only one row is visible for the user to switch an unselected value to a selected one, there's a simple solution. Instead of disabling the controls in the row, consider hiding the entire row until the user has made a selection in the row above.

Another scenario to address is when a user fills in all rows and then decides to reset the selection in the first row. In this case, it would be ideal to move up all the selected values so that the unselected row appears after the other rows.

Additionally, having submit buttons on every row may not be necessary. The act of making a selection should automatically trigger the next row to become visible, enhancing user-friendliness.

Here is a code snippet illustrating how you can implement these features:

$(function() {
  function showRows() {
    // Remove gaps
    $targetRows = $('.table-striped>tbody>tr');
    targetIndex = 0;
    $targetRows.each(function (index) {
      var $select = $(this).find('select.form-control');
      var selectedIndex = $select.prop('selectedIndex');
      if (targetIndex < index) {
        $targetRows.eq(targetIndex).find('select.form-control')
        .prop('selectedIndex', selectedIndex);
        $select.prop('selectedIndex', 0);
      }
      if (selectedIndex) targetIndex++;
    });
    targetIndex++;
    // Show/hide rows so only the last visible row has an unselected value
    $targetRows.slice(targetIndex).hide();
    $targetRows.slice(0,targetIndex).show();
  }

  $('.form-control').change(showRows);
  showRows();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr class="warning">
      <th>column1</th>
      <th>column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Observe how rows become visible upon selecting a value and hide again when undoing a selection, ensuring seamless shifting of values as required.

Note that I've used name properties instead of id to prevent duplicate IDs, which are invalid in HTML.

Answer №3

Here are a few ways you can achieve this:

$("table tbody tr").slice(1).find('input,select').prop('disabled', true);

or

$("table tbody tr:not(:eq(0))").find('input,select').prop('disabled', true);

or

$("table tbody tr").gt(0).find('input,select').prop('disabled', true);


$("table tbody tr").slice(1).find('input,select').prop('disabled', true);
$('input[type="submit"]').on('click', function() {
  $(this).parents('tr').next().find('input, select').prop('disabled', false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr class="warning">
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
  </tbody>
</table>

Answer №4

Here's a helpful tip for you:

$(document).ready(function(){
$(".table").each(function(){
    $(this).find('.form-control,.btn').prop('disabled',true);
    $(this).find('.form-control:first,.btn:first').prop('disabled',false);
});
});

Answer №5

To achieve the desired outcome, you can utilize the following snippet of JavaScript code.

$("table tbody tr:not(:eq(0))").find("select,input").prop("disabled",true);

View Demo

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

Using the arrow keys to navigate through a list of items without using jQuery

Exploring ways to develop a basic autocomplete feature without relying on third-party dependencies has been my recent project. So far, I have managed to populate a results list using an ajax call and complete fields with mouse onclick events for each optio ...

javascripthtmlcssajaxautocomplete

How can express.js be properly installed using typescript?

Currently, I am in the process of setting up a new project that involves using express.js with typescript integration. Would it suffice to just install @types/express by running the following command: npm install @types/express Alternatively, do I also ...

javascripttypescriptexpressnpm

Guide to positioning an image absolutely within a div

I am struggling to position a small close image within a div without success. The goal is for the image to always appear on the left side of the div, regardless of the content. The content consists of a text label with a maximum length of 8 characters. Iss ...

htmlcss

Styling multiple checkbox items in an Angular Material Autocomplete

Is there a way to adjust the height of autocomplete multiple checkbox items in Angular Material? I'd like it to look like this With a line item height of 18px But instead, it looks like this when using multiple checkboxes With a different checkbox ...

cssangularsassangular-material

What is the best way to send a form value to a servlet?

As someone who is relatively new to programming, I kindly ask for your patience with me. I am currently attempting to extract values from a form (embedded in a JSP) using JavaScript, and then make a post request to a servlet. The form consists of 6 differ ...

javajavascriptajaxjspservlets

Transferring information from website form to a C# program

Someone suggested using the HTTPListener class, but it appears to only return another web page in response. I need guidance on how to post data from a form on my website and process it in my C# application. If anyone has tutorials or simple examples, the ...

c#htmlweb

Undefined scope

angular.module('CrudApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/', { templateUrl: 'assets/tpl/lists.html', controller: ListCtrl }). when('/add-user&apos ...

javascriptangularjsangularjs-scope

Leveraging TipTap.dev for building a joint editing platform -

I have integrated the collaboration feature from tiptap.dev into my NextJS application. Initially, I used their CLI command for the Hocuspocus server which worked well on port 1234 locally and synchronized text editing across browsers seamlessly. However, ...

javascriptreactjsexpressnext.jswebsocket

sw-precache-webpack-plugin for webpack's default service worker template

When utilizing the sw-precache-webpack-plugin to create a service worker for my project, I've noticed that while all my fonts, js, and css files are stored in the cache storage, the index/html file is missing. This has resulted in it not functioning p ...

javascriptexpresswebpackejssw-precache

Conceal elements of a rectangular shape using CSS

https://i.stack.imgur.com/ebaeI.jpg I need help hiding the second rectangular shape on my website. I want the width to be 100% and responsive, but whenever I use position: absolute; with right:-10%, it's not working as expected. Even trying body { ma ...

htmlcss

How can I pass command line variables into an npm script?

I am facing an issue where I am attempting to pass a command line option (which is not stored in version control) to my main script index.js. This script performs specific actions based on a designated S3 bucket. Here is the relevant section from my packa ...

javascriptnode.jsshellnpmecmascript-6

Redux: Double rendering issue in mapStateToProps

I've recently delved into learning Redux, and I've encountered an issue that's been on my mind. import React, { useEffect } from "react"; import { connect, useDispatch } from "react-redux"; import Modal from "../Moda ...

javascriptnode.jsreactjsredux

Tips for making an image fill the entire screen with a header using React Navigation

My screen includes an image and I would like to capture the full-size screen with the header displayed. However, using position: "absolute" does not properly wrap the header, and setting header: null is not an option since I still want the back button to b ...

javascriptreactjsreact-nativereact-navigationreact-native-ios

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

javascriptjqueryhtmlcss

Tips for preventing the use of nested functions while working with AJAX?

Consecutively making asynchronous calls can be messy. Is there a cleaner alternative? The issue with the current approach is its lack of clarity: ajaxOne(function() { // do something ajaxTwo(function() { // do something ajaxThree() }); }); ...

javascriptajaxreadability

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Currently in the midst of developing my first Ionic 2 app, however, my understanding of typescript is still limited.. I aim to execute the authenticate() method within my constructor and then to: Retrieve the entire JSON response into the textarea and/o ...

htmljsonapiangulartypescript

Incorporate a distinct identifier for every menu item within the Material UI TablePagination

Can a unique identifier be assigned to each menu item generated using the <TablePagination> component? I would like to add a specific ID (e.g., id="menu_item_0", id="menu_item_1" & id="menu_item_2") to the menu item ...

javascripthtmlreactjsmaterial-uiaccessibility

Combine the values of two fields in real-time on a Model-View-Controller Edit form

One challenge I am facing is within an MVC Edit form that contains two fields named ExVAT and VAT. I would like to introduce a new field that displays the total of these two values. Currently, the total only reflects the sum of the two fields upon initial ...

javascriptc#asp.net-mvc

Generating a clickable link for the URL included in a tweet message

As someone who is just starting out in coding, I could really use some help. Currently, I am using node.js to fetch tweet text and displaying it using html. I would like to add a hyperlink for the URLs within the text. For example: #Times #News Ukrainians ...

jqueryhtmlnode.js

Customizing the Switch component individually for each item fetched from an API in React Native

I'm struggling with setting the switch button individually for each item in my API. Despite trying multiple solutions, none of them seem to work for me. const results = [ { Id: "IySO9wUrt8", Name: & ...

javascriptreactjstypescriptreact-nativeapi