javascript - Improve performance while selecting element from DOM -

i have more 20,000 records(rows) in dom. each row has 1 checkbox , and textbox. when check checkbox corresponding textbox should disabled that's how logic works.

if checkbox has id '1' corresponding textbox's id 'text_1',the logic textbox's id ="text_"+checkbox_id

scenario : if have list 10000 id's in random order (of checkboxes), have disable corresponding textbox. logic below

idlist.each(function(id){         $('#text'+id).attr("disabled",true).val("");       }     }); 

this logic takes around 10-12 sec disabled textboxes.

is there way improve performance.

try non-jquery version:

array.prototype.slice.call(document.getelementsbytagname('input')).map(function(input){     if(input.tagname == 'input' && input.type == 'checkbox' && /^text_\d+$/.test(input.id))     {         input.disabled = 'disabled';         input.value = '';     } }); 

it takes around 350ms - 400ms, on computer, disable 10000 checkboxes out of 20000 inputs, running firefox 43.0.4.

try here:

//generate inputs:  for(var = 0, html = ''; < 10000; i++)  	html += '<input type="checkbox" id="text_' + + '"><input type="text" id="text_' + + '_">';    document.body.innerhtml += html;      alert('starting test');    //code tested comes here  var start = performance.now();    array.prototype.slice.call(document.getelementsbytagname('input')).map(function(input){  	if(input.tagname == 'input' && input.type == 'checkbox' && /^text_\d+$/.test(input.id))  	{  		input.disabled = 'disabled';  		input.value = '';  	}  });    var end = performance.now();    alert('time: ' + (end - start) + 'ms');