選擇收音機時隱藏文本框

我的網站上有一個數據輸入表單，其中包含多個複選框，兩個單選按鈕和一個文本字段。如果選擇了其中一個單選按鈕，我想讓文本字段不可編輯。如果客戶嘗試輸入，則會顯示錯誤消息。我是Jquery和web編程的新手，所以無法找到相關答案。選擇收音機時隱藏文本框

單選按鈕和文本區域是如下

<form method="post" class="required-form" action="php/addcompanyengine.php"> 
    <ul class="forms"> 


    <p class="Region">Please select the type of listing you desire</p> 
    <ol> 
     <li><label class="checkbox">Bronze Listing</label> 
     <input type="radio" name="listing[]" id="listing" value="Bronze" checked></li> 
     </ol> 
     <ol> 
     <li><label class="checkbox">Silver Listing</label> 
     <input type="radio" name="listing[]" id="listing" value="Silver"></li> 
    </ol> 



     <label for="Description">Description:<br /><br /> 
      (Silver listings only <br /> <br /> 
      Maximum 400 characters)</label> 
      <textarea name="Description" cols="20" id="Description" maxlength="400" ></textarea>

基本上，如果客戶離開的青銅（默認）單選按鈕我想要的文本字段不可用的，如果他們選擇銀我想它可供他們輸入。

非常感謝，非常感謝。

來源

2012-09-19 user1682939

後

<script type="text/javascript"> $(document).ready(function() { $('.listing').change(function() { if ($(this).val() == 'Bronze') { $('#Description').attr('readonly','readonly'); } else { $('#Description').removeAttr('readonly'); } }); }); </script>

注意（）的函數你不應該在你的頁面兩個元素具有相同的ID。如果您將其用於CSS樣式，則應該使用該類。 – Liam

你可以通過默認禁用你的文本字段，並在無線電廣播變化中啓用它... – dsa

假設你已經擁有jQuery的加載（注意類屬性，而不是ID）：

<ol> 
    <li><label class="checkbox">Bronze Listing</label> 
    <input type="radio" name="listing[]" class="listing" value="Bronze" checked></li> 
    </ol> 
    <ol> 
    <li><label class="checkbox">Silver Listing</label> 
    <input type="radio" name="listing[]" class="listing" value="Silver"></li> 
</ol> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.listing').change({ 
      if ($(this).val() == 'Bronze') { 
       $('#Description').attr('readonly','readonly'); 
      } else { 
       $('#Description').removeAttr('readonly'); 
      } 
     }); 
    }); 
</script>

你可以看到它在這裏的行動：http://jsfiddle.net/AZ7wJ/

如果你想在原來的textarea非也可編輯，您可以將readonly="readonly"屬性添加到它。

來源

2012-09-19 14:09:04 manavo

輝煌，完美的作品。謝謝！ – user1682939

開始之前：

更改無線電input ID，以便它們是不同的。
將readonly屬性添加到textarea。

我們假設您使用listingBronze作爲青銅電臺input id。

//we listen to the change event 
$("#listingBronze").change(function(event){ 
    //we tell readonly is equal to bronze checked status 
    $('#Description').prop('readonly',(!!$(this).prop("checked"))); 
});

這個很簡單。由於readonly = checked代碼變得非常小。

注意：使用!!確保該值爲布爾值，因爲它不是一個值。

可選，你可以hide和show textarea的，丟棄的過程中readonly屬性：

$("#listingBronze").change(function(event){ 
    $('#Description').show(); 
    if(!!$(this).prop("checked")) $('#Description').hide(); 
});

我們展示的每一個變化textarea的，然後檢查checked屬性和隱藏如果爲真。

來源

2012-09-19 14:17:55 SparK

我懷疑接受的答案應該是變化

來源

2014-08-22 10:08:35 user1458474

選擇收音機時隱藏文本框

回答

相關問題