如何基於頁面加載時選中哪個單選按鈕來禁用文本區域？

我想改進此script用於通過單選按鈕選擇禁用文本區域。當前選擇「是」時，當選擇「否」時，文本區域應被禁用並啓用。如何基於頁面加載時選中哪個單選按鈕來禁用文本區域？

什麼我需要改變這樣的文本區域被禁用時，第一次加載頁面，如果正確的單選按鈕被選中？（是被默認選中，如果沒有改變已作出）

請裸露在介意這個頁面將被刷新並重定向到所以我將需要檢查單選按鈕上的實際選擇。我只是將它們設置爲全部在加載之前禁用，但是這個禁用的文本區域，即使我選擇了正確的單選按鈕。

HTML

<div class="group"> 
    <input type="radio" name="choice1" value="yes" checked/>Yes 
    <input type="radio" name="choice1" value="no" />No 
</div> 
<div class="group"> 
    <input type="radio" name="choice2" value="yes" checked/>Yes 
    <input type="radio" name="choice2" value="no" />No 
</div> 
<div class="group"> 
    <input type="radio" name="choice3" value="yes" checked/>Yes 
    <input type="radio" name="choice3" value="no" />No 
</div>   
<div> 
    <textarea data-trigger="choice1" rows="4" cols="20"></textarea> 
    <textarea data-trigger="choice2" rows="4" cols="20"></textarea> 
    <textarea data-trigger="choice3" rows="4" cols="20"></textarea> 
</div>

的JavaScript/JQuery的

$(function() { 

    var $choices = $(".group").find(":radio"); 
    $choices.on("change", function() { 
     var $this = $(this); 
     var choiceName = $this.attr('name'); 
     var tarea = $('[data-trigger="' + choiceName + '"]'); 
     if ($this.val() === "yes") { 
      tarea.val(''); 
      tarea.prop('readonly', true); 
      tarea.css('background-color', '#EBEBE4'); 
     } else { 
      tarea.prop('readonly', false); 
      tarea.css('background-color', '#FFFFFF'); 
     } 
    }); 
});

希望這是不夠清楚。

來源

2015-04-29 OrbitalFriendshipCannon

您可以在文檔就緒時觸發change事件，或者在HTML標記中默認設置'readonly'（或'disabled'）屬性。請注意，'readonly！= disabled'屬性 –

嘗試

$(".group").find(":radio[value=yes]:checked").each(function() { 
    $('[data-trigger="' + $(this).attr("name") + '"]').prop('readonly', true).css('background-color', '#EBEBE4'); 
});

DEMO

來源

2015-04-29 07:43:36 Balachandran

這是你需要的嗎？ – Balachandran

類屬性添加到您的textarea

<div> 
    <textarea data-trigger="choice1" rows="4" cols="20" class="group"></textarea> 
    <textarea data-trigger="choice2" rows="4" cols="20" class="group"></textarea> 
    <textarea data-trigger="choice3" rows="4" cols="20" class="group"></textarea> 
</div>

在你的腳本： -

$(document).ready(function() { 
$("textarea.group").attr("disabled", true); 
});

來源

2015-04-29 07:47:03

如何基於頁面加載時選中哪個單選按鈕來禁用文本區域？

回答

相關問題