Traversing through table rows and disabling input in second column

Question

please have a look at the below code.

<table>
 <tr>
     <td>
          <select name='td1'>
               <option value=1>One</option>
               <option value=2>Two</option>
               <option value=3>Three</option>
          </select>
     </td>
     <td>
          <select name='td2'>
               <option value=1>One</option>
               <option value=2>Two</option>
               <option value=3>Three</option>
          </select>
     </td>
  </tr>


</table>

JavaScript:

<script>
document.getElementsByTagName("tr").each(function(){
   $(this).getElementsByTagName("td")[1].getElementsByTagName("select").disabled=true;
})
</script>

Requirement is 1. By default, the select field in the second column(i.e, second td's select) must be disabled. 2. the second select field can only be enabled only when the user selects third option in the first select field. 3. the solution must be in pure javascript( not using jquery)

Thanks in Advance.

I cannot see any code here, if you want some JavaScript solution. — vahdet
– vahdet, Commented Jul 4, 2018 at 11:06
I mean, it'd be better if you have shared what you have tried: Where is the JS code you have tried? — vahdet
– vahdet, Commented Jul 4, 2018 at 11:13
in one table row there are two td's and each td contains a select tag. now when page loads the page, second td's select must be disabled and only when the user selects the thrid option from select dropdown of first td then automatically enable the second td's select — Kaleem Nalband
– Kaleem Nalband, Commented Jul 4, 2018 at 11:14

jaboja · Accepted Answer · 2018-07-04 11:46:11Z

1

Array.from(document.querySelectorAll('tr')).forEach(tr => {
    const secondSelect = tr.children[1].querySelector('select');
    secondSelect.disabled = true;
    tr.querySelector('td select').addEventListener('change', function() {
        secondSelect.disabled = (this.value != 3);
    });
});

edited Jul 4, 2018 at 11:46

answered Jul 4, 2018 at 11:21

jaboja

2,2671 gold badge24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kaleem Nalband Over a year ago

I appreciate your effort, when page loads the second select must be disabled. it can enable only when user selects the third option in first select.

jaboja Over a year ago

You can use the disabled attribute in your HTML code then to start with the disabled state.

Kaleem Nalband Over a year ago

okay code is working, but how to add disable attribute to only second td's select using javascript. i dont have access to html code, since it is generating from the confirmit tool

Kiranmoy Pradhan · Accepted Answer · 2018-07-04 13:10:24Z

1

This code will work only for one row having two select option,which is perfectly suitable for your example.

var selectTag = document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('select')
    selectTag[1].disabled = true;  
    selectTag[0].addEventListener("change", function(){
      if(selectTag[0].value == 3){
        selectTag[1].disabled = false;
      }
      else{
        selectTag[1].disabled = true;
      }
    });

answered Jul 4, 2018 at 13:10

Kiranmoy Pradhan

611 silver badge8 bronze badges

Comments

Taki · Accepted Answer · 2018-07-04 11:21:38Z

0

for disabeling the select you just need to add the disabled attribute using setAttribute , or element.disabled = true , then listen for the change of the other select and check its value, if it's equal to 3 remove the disabled,

let td2 = document.querySelector('[name=td2]');
td2.disabled = true ;

let td1 = document.querySelector('[name=td1]');
td1.addEventListener('change', function() {

  if (+this.value === 3) // the + sign is a shorthand for parseInt
    td2.disabled = false ;
  else
    td2.disabled = true ;
})

<table>
  <tr>
    <td>
      <select name='td1'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
      </select>
    </td>
    <td>
      <select name='td2'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
        <option value='3'>Three</option>
      </select>
    </td>
  </tr>


</table>

answered Jul 4, 2018 at 11:21

Taki

17.7k5 gold badges28 silver badges48 bronze badges

2 Comments

Kaleem Nalband Over a year ago

Thank you so much, your code worked, but what if there are multiple rows?

Kaleem Nalband Over a year ago

i mean, multiple <tr> with same setup

Collectives™ on Stack Overflow

Traversing through table rows and disabling input in second column

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related