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

Managing numerous JavaScript objects within a plugin

I have developed a straightforward javascript plugin that enables me to gather data from specific html elements. A page can contain x number of elements (usually up to 20), each with its own settings. However, the issue I am facing is that the returned obj ...

javascriptjqueryjsonobject

Finding the total amount in VueJS2

I'm having trouble calculating the total row in Vuejs2 as shown in the image below: This is the code I have been using: <tr v-for="(product, index) in form.items" :key="index"> <td class="saleTable--td">{{ product.name }}</td& ...

htmlvue.js

Accessing JSON key by value alone

Imagine you have a variable storing the value of a key in a JSON object. Let's see... var stooges = [ {"id" : "a", "name" : "Moe"}, {"id" : "b", "name" : "Larry"}, {"id" : "c", "name" : "Shemp"} ]; var stooge = "Larry"; I am seeking gui ...

javascriptjqueryjsonobject

In CSS3, utilize the calc() function to vertically center elements using viewport height (vh) and viewport

One of the most common cases involves using vh for setting the height of a div, and using vm for adjusting font size. Using CSS3 div.outer { height: 20vh; } div.inner { font-size: 3vw; height: auto; } div.inner2 { font-size: 2vw; } HTML - Scenario 1 <d ...

htmlcssstylesheetviewport-units

"JavaScript that doesn't rely on a specific browser

Why does this code behave differently across browsers? What modifications are needed to ensure consistent behavior in all of them? In Firefox, it functions correctly, using the URL /some/path/?searchedText=sometext. However, in IE, nothing happens when cli ...

javascripthtmlbrowser

Sending a string data from client to a MongoDB database using Express.js and Node.js with the help of Sails framework

Need help with sending a string from client to mongoDB using Sails The "val" variable represents a string sent in real time from the client to the server database POST Form( is using HTML the best approach here? ) <!DOCTYPE html> <html> < ...

javascriptnode.jsmongodbexpresssails.js

The error message from the mongoose plugin is indicating a problem: it seems that the Schema for the model "Appointment" has not been properly registered

I need help troubleshooting a mongoose error that is being thrown. throw new mongoose.Error.MissingSchemaError(name); ^ MissingSchemaError: Schema hasn't been registered for model "Appointment". Use mongoose.model(name, schema) I have double-c ...

javascriptnode.jsmongodbmongoosemongoose-schema

ways to incorporate searching within JSON data using AJAX and jQuery in JavaScript

My search box needs to have JSON data appended into it. Below is the HTML code: <input type="search" id="merchantName" name="merchant" placeholder="enter merchant name"></input> I have JSON data containing merchant names that I want to appen ...

javascriptjqueryhtmlajaxjson

When using jQuery load and TinyMCE, I encountered an error stating "g.win.document is null" upon subsequent loads

New to stackoverflow and thrilled to make my first post! I'm working on a page where clicking a button triggers the function editIEPProgram(). This function counts how many specific divs exist, adds another div, loads it with content from '/cont ...

jqueryajaxloadtinymce

Steps for deactivating tab stops on the primary webpage in the presence of a snackbar

On my web page, there are multiple drop-down menus, input fields, and buttons that can be interacted with using both the tab key and mouse. After entering certain data, I trigger a snackbar (source: https://www.w3schools.com/howto/howto_js_snackbar.asp) t ...

htmljavascript

Using jQuery, wrap two specific HTML elements together

I am working with a set of elements: <div id="one">ONE</div> <div id="two">TWO</div> <div id="three">THREE</div> <div id="four">FOUR</div> <div id="five">FIVE</div> My goal is to wrap a DIV tag ...

jqueryhtmlcss

Using Jquery.post to handle form submission with dual buttons

After submitting my form, I am encountering an issue where only a popup box appears without displaying any query results. There are 2 submit buttons in my form that trigger the query of a PHP script, and the results should be shown in the popup box. It s ...

phpjquerymysql

React rendering: Injects an equals sign and quotation marks into the async attribute of <script> tag

I recently developed a basic web application using Next.js and React. One of the functional components (referred to as a "page" in Next.js) includes a script tag like this: <script async src="https://example.com/file.js"></script> However, upo ...

htmlreactjsnext.jsjsx

Determine whether the server request originated from an Ionic mobile application

Currently, we are in the final stages of completing an Ionic project with a PHP backend. To enhance the security of our backend and protect it from external influences, we aim to restrict access to the backend only from within the Ionic project (native app ...

phphtmlcsssecurityionic-framework

What is the best way to transmit a JSON object rather than a JSON string to the browser using Rails?

Currently in my Rails code, I am using the following to send data to node.js: NodePush[].trigger('unit', 'join', {:id =>record.user_id, :name => record.user.name}, record.unit_id) The issue that I am encountering is that the con ...

jqueryruby-on-railsjson

Learn how to efficiently execute a function multiple times using pure JavaScript

I am trying to create a tabbed content functionality with multiple elements. How can I utilize the same function for various elements declared in a variable? For example, I want to clone the parent div.tabs element with similar content but different ids an ...

javascripthtmlclick

The issue with Fancybox not functioning properly does not display any errors in Firebug, and all the images are

Why is Fancybox not functioning on this specific page? It has worked perfectly on numerous other websites with the same code. Firebug is not showing any errors. Any thoughts on what might be causing the issue? Appreciate any insight, Bob ...

jqueryfancybox

Choose all stylus/css imports except for those with a specific ending

How can a rule be correctly written in a .styl file to import all files from selected folders except those that contain the -ie suffix (e.g. bar-ie.style)? What is the best way to achieve this? The code below is not functioning as expected: import([&apos ...

cssregeximportstylus

Using React to map through a nested array within an object

In an attempt to extract the nested array "records", my current approach shows the array in the react console, but with an error. I will try to be brief while still providing necessary details. Upon encountering an error, there are 3 lines specifically po ...

javascriptjsonreactjsecmascript-6

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

I'm facing an issue with my function that involves chained Ajax requests. Function A and B are both Ajax requests, where A runs first and B runs after A returns its data. The problem arises when Function C executes Function B. Upon execution of Funct ...

javascriptjqueryajax