netpumber Posted September 4, 2012 Share Posted September 4, 2012 Hello. I have this simple html code <select name="ColumnsNumberDropdown"> <option value="one">Select</option> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> <option value="four">4</option> <option value="five">5</option> <option value="six">6</option> <option value="seven">7</option> </select><br><hr> <label for="column_name" style="padding-right:10px;">Column1 name:</label> <input type="text" name="ColumnNameInput" disabled="true" /><br> <label for="column_name" style="padding-right:10px;">Column2 name:</label> <input type="text" name="Column2NameInput" disabled="true"/><br> <label for="column_name" style="padding-right:10px;">Column3 name:</label> <input type="text" name="Column3NameInput" disabled="true"/><br> <label for="column_name" style="padding-right:10px;">Column4 name:</label> <input type="text" name="Column4NameInput" disabled="true"/><br> <label for="column_name" style="padding-right:10px;">Column5 name:</label> <input type="text" name="Column5NameInput" disabled="true"/><br> <label for="column_name" style="padding-right:10px;">Column6 name:</label> <input type="text" name="Column6NameInput" disabled="true"/><br> <label for="column_name" style="padding-right:10px;">Column7 name:</label> <input type="text" name="Column7NameInput" disabled="true"/> As you can see all <input> are disabled. When user chooses from the select menu e.g the number 2 i want "ColumnNameInput" and "Column2NameInput" inputs to be enabled. If someone choose number 5 from menu , first 5 inputs to be enabled and so on... I've tried this but i need to make it more specific on what user chosen and not because the select item changed. $("select[name='ColumnsNumberDropdown']").change(function () { var text = $("input[name='ColumnNameInput']"); if (text.attr('disabled')) { text.removeAttr('disabled'); } else { text.attr('disabled', 'disabled'); } }); Any help will be thankful. Quote Link to comment https://forums.phpfreaks.com/topic/267988-enable-text-inputs-form-a-select-menu/ Share on other sites More sharing options...
codefossa Posted September 4, 2012 Share Posted September 4, 2012 Here's a little example of what I think you're after. http://xaotique.no-ip.org/tmp/4.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Temporary Page</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <style type="text/css"> #inputs { float: left; width: 250px; } #inputs input { width: 240px; } </style> <script type="text/javascript"> $(document).ready(function() { function disableInputs() { $("#inputs input").each(function() { $(this).attr("disabled", "disabled"); }); } disableInputs(); $("#selection option").click(function(e) { var select = parseInt($(this).html()) - 1; disableInputs(); $("#inputs input:eq(" + select + ")").removeAttr("disabled"); }); }); </script> </head> <body> <div id="inputs"> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> </div> <select id="selection"> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> <option value="four">4</option> <option value="five">5</option> </select> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/267988-enable-text-inputs-form-a-select-menu/#findComment-1375114 Share on other sites More sharing options...
netpumber Posted September 4, 2012 Author Share Posted September 4, 2012 Your code seems to work only with firefox and not with chrome. Quote Link to comment https://forums.phpfreaks.com/topic/267988-enable-text-inputs-form-a-select-menu/#findComment-1375116 Share on other sites More sharing options...
codefossa Posted September 4, 2012 Share Posted September 4, 2012 Page updated and here's the new code. It's not as nice, but it works on Chrome too .. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Temporary Page</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <style type="text/css"> #inputs { float: left; width: 250px; } #inputs input { width: 240px; } </style> <script type="text/javascript"> $(document).ready(function() { function disableInputs() { $("#inputs input").each(function() { $(this).attr("disabled", "disabled"); }); } disableInputs(); $("#selection").click(function(e) { disableInputs(); var selected = $(this).val(), select = 0; $("#selection option").each(function() { if ($(this).val() == selected) select = parseInt($(this).html()) - 1; }); $("#inputs input:eq(" + select + ")").removeAttr("disabled"); }); }); </script> </head> <body> <div id="inputs"> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> </div> <select id="selection"> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> <option value="four">4</option> <option value="five">5</option> </select> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/267988-enable-text-inputs-form-a-select-menu/#findComment-1375124 Share on other sites More sharing options...
codefossa Posted September 4, 2012 Share Posted September 4, 2012 As a quick thought, I'd put a default selection "Select Input" or whatever .. then use the index of the each loop. Little cleaner, won't need parsed, and won't trigger when you're selecting the first input. The default could also be to disable all of them, depending on what you're actually doin' with it. Quote Link to comment https://forums.phpfreaks.com/topic/267988-enable-text-inputs-form-a-select-menu/#findComment-1375129 Share on other sites More sharing options...
netpumber Posted September 4, 2012 Author Share Posted September 4, 2012 Ok thank you a lot for your answer. Quote Link to comment https://forums.phpfreaks.com/topic/267988-enable-text-inputs-form-a-select-menu/#findComment-1375133 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.