Databases
StackOverflow2013
Postsdbo
POusing selector to enable/disable input text with jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POusing selector to enable/disable input text with jquery
    text
    copied!<p>Thank "Abhishek Jain", "rps", "adeneo" for your code. this help me to resolved it.</p> <p>I have problem with below code:</p> <p>HTML</p> <pre><code>&lt;table cellpadding="0" cellspacing="0" width="100%" class="table" id="addtable" border="1"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th width="4%"&gt;&lt;b&gt;Date&lt;/b&gt;&lt;/th&gt; &lt;th width="4%"&gt;&lt;b&gt;Cut Number&lt;/b&gt;&lt;/th&gt; &lt;th width="4%"&gt;&lt;b&gt;Content&lt;/b&gt;&lt;/th&gt; &lt;th width="4%"&gt;&lt;b&gt;Others&lt;/b&gt;&lt;/th&gt; &lt;th width="5%"&gt;&lt;b&gt;Customer name&lt;/b&gt;&lt;/th&gt; &lt;th width="4%"&gt;&lt;b&gt;Customer code&lt;/b&gt;&lt;/th&gt; &lt;th width="5%"&gt;&lt;b&gt;Address&lt;/b&gt;&lt;/th&gt; &lt;th width="5%"&gt;&lt;b&gt;Owe amount&lt;/b&gt;&lt;/th&gt; &lt;th width="4%"&gt;&lt;b&gt;Executive&lt;/b&gt;&lt;/th&gt; &lt;th width="6%"&gt;&lt;b&gt;Obtain Amount&lt;/b&gt;&lt;/th&gt; &lt;th width="9%"&gt;&lt;b&gt;Obtain Room&lt;/b&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr id="addrow"&gt; &lt;td&gt;&lt;input name="date[]" id="mask_dm1" type="text" size="1" value=""&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="cutno[]" type="text" size="6" &gt;&lt;/td&gt; &lt;td&gt; &lt;select name="cutcontent[]" id="selector"&gt; &lt;option value="0"&gt;Please select&lt;/option&gt; &lt;option value="1"&gt;Value 1&lt;/option&gt; &lt;option value="2"&gt;Value 2&lt;/option&gt; &lt;option value="3"&gt;Value 3&lt;/option&gt; &lt;option value="other"&gt;Other&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input name="cutother[]" type="text" size="4" id="cutother" disabled /&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="cusname[]" type="text" size="4" &gt;&lt;/td&gt; &lt;td&gt;&lt;input name="cuscode[]" type="text" size="2" &gt;&lt;/td&gt; &lt;td&gt;&lt;input name="cusaddress[]" type="text" size="4" &gt;&lt;/td&gt; &lt;td&gt;&lt;input name="owe[]" type="text" size="2" id="cutowe" disabled /&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="executive[]" type="text" size="1" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="obtainamount[]" type="text" size="2" id="obtainamount" disabled /&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="obtainroom[]" type="text" size="2" id="obtainroom" disabled /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; </code></pre> <p></p> <p></p> <p></p> <p>Javascript:</p> <pre><code>$(document).ready(function () { var clonedRow = ' &lt;td&gt;&lt;input name="date[]" id="mask_dm1" type="text" size="1" value=""&gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="cutno[]" type="text" size="6" &gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;'; clonedRow += ' &lt;select name="cutcontent[]" id="selector"&gt;'; clonedRow += ' &lt;option value="0"&gt;Please select&lt;/option&gt;'; clonedRow += ' &lt;option value="1"&gt;Value 1&lt;/option&gt;'; clonedRow += ' &lt;option value="2"&gt;Value 2&lt;/option&gt;'; clonedRow += ' &lt;option value="3"&gt;Value 3&lt;/option&gt;'; clonedRow += ' &lt;option value="other"&gt;Other&lt;/option&gt;'; clonedRow += ' &lt;/select&gt;'; clonedRow += ' &lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="cutother[]" type="text" size="4" id="cutother" disabled /&gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="cusname[]" type="text" size="4" &gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="cuscode[]" type="text" size="2" &gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="cusaddress[]" type="text" size="4" &gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="owe[]" type="text" size="2" id="cutowe" disabled /&gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="executive[]" type="text" size="1" /&gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="obtainamount[]" type="text" size="2" id="obtainamount" disabled /&gt;&lt;/td&gt;'; clonedRow += ' &lt;td&gt;&lt;input name="obtainroom[]" type="text" size="2" id="obtainroom" disabled /&gt;&lt;/td&gt;'; var appendRow = '&lt;tr id="addrow"&gt;' + clonedRow + '&lt;/tr&gt;'; $('#btnAddMore').click(function () { $('#addtable tr:last').after(appendRow); $('select#selector').change(function () { var theVal = $(this).val(); switch (theVal) { case '1': $('input#cutowe').removeAttr('disabled'); $('input#obtainamount').removeAttr('disabled'); $('input#obtainroom').removeAttr('disabled'); break; case '2': $('input#cutother').removeAttr('disabled'); break; default: $('input#cutowe').attr('disabled', 'disabled'); $('input#obtainamount').attr('disabled', 'disabled'); $('input#obtainroom').attr('disabled', 'disabled'); $('input#cutother').attr('disabled', 'disabled'); break; } }); }); $('select#selector').change(function () { var theVal = $(this).val(); switch (theVal) { case '1': $('input#cutowe').removeAttr('disabled'); $('input#obtainamount').removeAttr('disabled'); $('input#obtainroom').removeAttr('disabled'); break; case '2': $('input#cutother').removeAttr('disabled'); break; default: $('input#cutowe').attr('disabled', 'disabled'); $('input#obtainamount').attr('disabled', 'disabled'); $('input#obtainroom').attr('disabled', 'disabled'); $('input#cutother').attr('disabled', 'disabled'); break; } }); }); </code></pre> <p>When I press "Add more row" button, the selector named "Content" at row#2 has effect on the all input. how to resolve it? see example <a href="http://jsfiddle.net/N2jyy/6/" rel="nofollow">http://jsfiddle.net/N2jyy/6/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload