Включить текстовое поле, только если выбран переключатель - PullRequest
Новая
       10

Включить текстовое поле, только если выбран переключатель

1 голос
/ 23 февраля 2012

У меня есть система обратной связи на этом веб-сайте, который я создаю, и пользователей просят предоставить отзыв об услуге, которую они получили.У них есть выбор: предоставить реальную обратную связь или пропустить все.У меня есть 2 переключателя (одна для положительной; другая для отрицательной) 

<input type="radio" name="rating" value="1" id="green" /><label for="green">Positive</label><br />
<input type="radio" name="rating" value="0" id="red" /><label for="red">Negative</label>

Затем у меня есть textarea для пользователей, чтобы обеспечить фактическую обратную связь.Я бы предпочел, чтобы текстовая область была включена ТОЛЬКО , если пользователь нажимает реальную кнопку-переключатель.Если нет, текстовое поле остается отключенным.Как я должен идти об этом?(Я думаю, jQuery)

Спасибо, ребята.

[EDIT]

Спасибо за быстрый ввод, ребята.Кроме того, если я могу добавить, что, если, скажем, я генерирую строки из данных в MySQL.Что делает имена (т. Е. Для идентификатора пользователя 1) name = rating [1] и name = feedback [1].Как мне выбрать их, используя jQuery?

Ответы [ 4 ]

5 голосов
/ 23 февраля 2012 
$('input[name="rating"]').on('change', function() {
    $('textarea[name="feedback"]').show();
});

http://jsfiddle.net/933DJ/

Обновление согласно вашему комментарию: 

$('input[name="rating"]').on('change', function() {
    $('textarea[name="feedback"]').attr('disabled', false).focus();
});

http://jsfiddle.net/933DJ/1/

3 голосов
/ 23 февраля 2012

Вы должны установить текстовую область следующим образом 

<textarea style="width: 95%;" rows="6" name="feedback" disabled></textarea>

, а затем 

$('input[name=rating]').click(function(){
   $('textarea[name=feedback]').removeProp('disabled');
})
1 голос
/ 23 февраля 2012

Если вы используете jQuery 1.7+, вы можете сделать: 

$("input[name=rating]").click(function(){
    $("#textareaid").prop("disabled", this.checked);
});

(обратите внимание на использование prop vs attr)

0 голосов
/ 23 февраля 2012 
<form name="f1" action="" >
<input type="radio" name="rating" value="1" id="green" onclick="somefunction(0)"/><label for="green">Positive</label><br />
<input type="radio" name="rating" value="0" id="red" onclick="somefunction(1)" /><label for="red">Negative</label>
<textarea style="width: 95%;" rows="6" name="feedback" readonly="readonly" ></textarea>
</form>
<script type="text/javascript">

function somefunction(val)
{
    if(val)
document.f1.feedback.setAttribute("readonly",val)
else
document.f1.feedback.removeAttribute("readonly",val)


}
</script>
...