Отключить раскрывающийся список при нажатии кнопки-переключателя - PullRequest
Новая
       27

Отключить раскрывающийся список при нажатии кнопки-переключателя

5 голосов
/ 13 сентября 2010

У меня есть две радиокнопки и выпадающий список, как вы можете видеть ниже.Я хочу сделать следующее: 1. Если флажок «Нет» установлен, либо скрыть, либо выделить серым из выпадающего списка, и 2. Когда флажок «Да» установлен, показать раскрывающийся список.

Любые указатели приветствуются! 

<td colspan="4">
<input name="discount" type="radio" id="Yes" value="Yes" />Yes
<input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  
<select class="purple" name="discountselection" id="discountselection">
<option value="1 Year" selected="selected">1 Year</option>
<option value="2 Years">2 Years</option>
<option value="3 Years">3 Years</option>
</select>                  
</td>

Ответы [ 6 ]

18 голосов
/ 13 сентября 2010 
   <script type="text/javascript">
                   $("#Yes").click(function() {
                        $("#discountselection").attr("disabled", false);
                        //$("#discountselection").show(); //To Show the dropdown
                    });
                    $("#No").click(function() {
                        $("#discountselection").attr("disabled", true);
                        //$("#discountselection").hide();//To hide the dropdown
                    });
    </script>

Кроме того, установите стиль отображения раскрывающегося списка или отключенное свойство в HTML на основе выбранной вами радиопереключателя по умолчанию при загрузке страницы. 

 <select  name="discountselection" id="discountselection" disabled="disabled">
    <option value="1 Year" selected="selected">1 Year</option>
    <option value="2 Years">2 Years</option>
    <option value="3 Years">3 Years</option>
    </select>
3 голосов
/ 13 сентября 2010 
$('input:radio[name="discount"]').change(function() {
    if ($(this).val()=='Yes') {
        $('#discountselection').attr('disabled',true);
    } else
        $('#discountselection').removeAttr('disabled');
});​

http://jsfiddle.net/uSmVD/

2 голосов
/ 13 сентября 2010

Вам необходимо установить select элемент управления на disabled и использовать код, подобный этому: 

​$(function(){
    $('input:radio[name=discount]').one('change', function(){
        $('.purple').removeAttr('disabled');
    });
});​

См. http://www.jsfiddle.net/A3BuQ/6/

Ссылка: .one () , .removeAttr ()

1 голос
/ 13 сентября 2010

Будет ли это сделать? 

$('input:radio').bind('change', function(){
    $('select').attr('disabled', $(this).val() == "No");
});

Проверено, отлично работает. Удачи.

1 голос
/ 13 сентября 2010 
​$(function(){
  $('input:radio').bind('change', function(){
     $('#discountselection').attr('disabled', !$("#yes").is(":checked"));
  });
});​
1 голос
/ 13 сентября 2010

Вы можете скрыть это с помощью jQuery: 

$(document).ready(function(){     

$('#discountselection').hide();

        $('#No').click(function(){
            $('#discountselection').hide();
        });

        $('#Yes').click(function(){
            $('#discountselection').show();
        });
});

проверить это: http://www.jsfiddle.net/cFUsU/

ОБНОВЛЕНИЕ: добавлено $ (документ) .ready ();метод для запуска установить этот код в действие, когда страница готова

...