啓用一個文本框取決於在下拉選擇的值

您好我有一個HTML頁面有一個文本框和一個下拉框。第一次加載頁面時，根據下拉列表中的值（「選定」），需要啓用或禁用文本框。我想用JavaScript或jQuery來做到這一點。我需要一點幫助。啓用一個文本框取決於在下拉選擇的值

<table> 
    <tr> 
    <td class="td"> 
     <input type="text" size="3" name="length21" value="0" disabled="disabled"/> 
    </td> 
    <td class="td"> 
     <div class="type"> 
     <select name="type1" id="field_type"> 
      <option value="TEXT" SELECTED="">TEXT</option> 
      <option value="TEXTAREA" >TEXTAREA</option> 
      <option value="DROPDOWN" >DROPDOWN</option> 
      <option value="DATE" >DATE</option> 
      <option value="CHECKBOX" >CHECKBOX</option> 
      <option value="SEPARATOR" >SEPARATOR</option> 
      <option value="DATETIME" >DATETIME</option> 
      <option value="HIERARCHY" >HIERARCHY</option> 
     </select> 
     </div> 
    </td> 
    </tr> 
    <tr> 
    <td class="td"> 
     <input type="text" size="3" name="length21" value="0" disabled="disabled"/> 
    </td> 
    <td class="td"> 
     <div class="type"> 
     <select name="type2" id="field_type"> 
      <option value="TEXT" >TEXT</option> 
      <option value="TEXTAREA" >TEXTAREA</option> 
      <option value="DROPDOWN" SELECTED="">DROPDOWN</option> 
      <option value="DATE" >DATE</option> 
      <option value="CHECKBOX" >CHECKBOX</option> 
      <option value="SEPARATOR" >SEPARATOR</option> 
      <option value="DATETIME" >DATETIME</option> 
      <option value="HIERARCHY" >HIERARCHY</option> 
     </select> 
     </div> 
    </td> 
    </tr> 
</table>

現在我想要的是，當頁面加載時，對於下拉列表中選擇了TEXT的行，文本框將被啓用。但不適用於其他。我非常感謝任何幫助。

來源

2012-08-09 Som Sarkar

在jQuery中：

$(document).ready(function(){ 
    $('select').on('change',function(){ 
    if($('select').val() == "TEXT") { 
     $(this).parents('td').siblings('td').children('input').removeAttr('disabled'); 
    } 
    }); 
});

來源

2012-08-09 15:05:31

斯科特您好，感謝您的回覆，但只有在下拉菜單中進行更改時才能使用。但我想要的是在下拉菜單選擇TEXT時加載頁面的第一個實例啓用文本框。 – 2012-08-09 15:07:33

你可以將他的代碼移動到一個函數中，並在表單被改變以及在$（document）.ready（）' – 2012-08-09 15:11:53

改變斯科特的代碼位，所以它適用於你的負載：

$(document).ready(function() { 
    $('select').each(function() { 
     var comboBox = $(this); 
     checkValue(comboBox); 
     comboBox.on('change', function() { 
      checkValue(comboBox); 
     }); 
    }); 
}); 

function checkValue(comboBox) { 
    if (comboBox.val() == "TEXT") { 
     comboBox.parents('td').siblings('td').children('input').removeAttr('disabled'); 
    } 
    else { 
     comboBox.parents('td').siblings('td').children('input').attr('disabled','disabled'); 
    } 
}

這裏順便說一句小提琴：http://jsfiddle.net/BbStP/1

來源

2012-08-09 15:17:37

中調用它。是的，應該這樣做！ – 2012-08-09 15:27:12

非常感謝Johan。當我在eclipse中使用你的代碼時，它不能保存它。這是說它不能保存，因爲有些字符不能用ISO-8859-1字符編碼映射。任何想法該怎麼辦？ – 2012-08-09 15:44:00

心靈吹Johan。它的工作現在完美。非常感謝。你讓我今天一整天都感覺很好。 – 2012-08-09 15:49:35

啓用一個文本框取決於在下拉選擇的值

回答

相關問題