I have a tbody inside which there are href/input type text/ etc

I have a code to get all elements of tbody but how to disable it.

My tbody

<tbody id="FamilyHistory_3">
<tr>
  <td class="tablecell">&nbsp;&nbsp;
    <a id="FamilyHistory_3" name="316098" value="316098" onclick="javascript:save('FamilyHistory_3','test');" href="#">
      <img style="border-style: none" src="../images/v10/arrow_doc.png">
    </a>&nbsp;test
  </td>
</tr>
<tr>
  <td>
    <table>
      <tbody>
        <tr>
          <td></td>
          <td class="tablecell">
            <input type="checkbox" value="Yes" name="10627_316098">Yes 
            <input type="checkbox" checked="" value="No" name="10627_316098">No&nbsp;&nbsp;
          </td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>
<tr>
  <td height="2px"></td>
</tr>
</tbody>

Below is my code to get the content of tbody

function save(inputID,category){

var content= document.querySelectorAll('#tbodyID');

  for(var i=0; i<content.length; i++){
    // how to disable all the elements inside it
  }
}

I have a tbody inside which there are href/input type text/ etc

I have a code to get all elements of tbody but how to disable it.

My tbody

<tbody id="FamilyHistory_3">
<tr>
  <td class="tablecell">&nbsp;&nbsp;
    <a id="FamilyHistory_3" name="316098" value="316098" onclick="javascript:save('FamilyHistory_3','test');" href="#">
      <img style="border-style: none" src="../images/v10/arrow_doc.png">
    </a>&nbsp;test
  </td>
</tr>
<tr>
  <td>
    <table>
      <tbody>
        <tr>
          <td></td>
          <td class="tablecell">
            <input type="checkbox" value="Yes" name="10627_316098">Yes 
            <input type="checkbox" checked="" value="No" name="10627_316098">No&nbsp;&nbsp;
          </td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>
<tr>
  <td height="2px"></td>
</tr>
</tbody>

Below is my code to get the content of tbody

function save(inputID,category){

var content= document.querySelectorAll('#tbodyID');

  for(var i=0; i<content.length; i++){
    // how to disable all the elements inside it
  }
}

• javascript
• jquery

• 2 Don't you want document.getElementById('tbodyID')? and what do you mean by disable? – Albzi Commented Apr 24, 2014 at 15:25
• @BeatAlex I want make every thing read only like checkbox/radio button disable, input text readonly. – pise Commented Apr 24, 2014 at 15:26
• Got ya, check my answer :) – Albzi Commented Apr 24, 2014 at 15:34

4 Answers 4

JSFiddle

document.querySelector('#tbodyID input').disabled = true;

You don't need jQuery for this.

For more than one:

JSFiddle

var l = document.querySelectorAll('#tbodyID input');

for (i = 0;i<l.length;i++)
{
    l[i].disabled = true;
}

There's no need to loop, jquery can deal with groups of elements just using selectors.

Use the Jquery selectors and the prop function to add disabled="disabled" to each one.

You can also select multiple items using a ma separated list

$('#tbodyID input, #tbodyID select, ....').prop('disabled', true);

disabling an a tag will not prevent it from being clicked though. May be better to hide() these.

$('#tbodyID a').hide();

You might need to specify the types of all elements you want to disable. If you have jQuery, you can do that with something like this:

$('#tbodyID').find('a, input').prop('disabled', true);

Explanation

• $('#tbodyID') : Select the element with id tbodyID
• find('a, input') : Find all the a and input elements inside it
• prop('disabled', true) : Set the disabled property of each element returned by the previous mand

Based on your answer finally I acplished my task using below code. I know you people have already answer but then also I am posting my answer with few addition.

Disable input

$('[id='+inputID+']').find('input').attr('disabled', true);

id of tbody

Disable click but clickable hand will be there but no request will be submitted to server

 $('[id='+inputID+']').attr('onclick','').unbind('click');

id of anchor tag

Thanks,
Pise