Как отключить выбор даты JQuery на радио-кнопку - PullRequest
Новая
       26

Как отключить выбор даты JQuery на радио-кнопку

7 голосов
/ 05 мая 2009

Я новичок в jQuery. Любая помощь будет оценена

У меня есть два переключателя и два текстовых поля, в которых я отображал дату с помощью jquery.

Когда я нажимаю на Radio1, тогда в обоих текстовых полях я могу выбрать дату, но когда я нажимаю на Radio2, я не могу выбрать дату в поле text2. Поле text2 должно быть отключено, а средство выбора даты jquery не должно работать.

Я отключил поле text2, но функция даты все еще работает.

-

мой код идет сюда 

<script language='javascript'>
<!-- //
function setReadOnly(obj)
{
if(obj.value == "yes")
{
document.forms[0].text2.style.backgroundColor = "#ffffff";
document.forms[0].text2.readOnly = 0;
document.forms[0].text2.value = "";

} else {
document.forms[0].text2.style.backgroundColor = "#eeeeee";
document.forms[0].text2.readOnly = 1;
document.forms[0].text2.value = "Not applicable!";
document.forms[0].number = disbaled;

}
}
// -->
</script>
<script> 
$(document).ready(function() {
    $("#text1").datepicker
    ({
        showOn: 'button', buttonImage: 'images/cal.gif', buttonImageOnly: true,
        dateFormat: 'dd-mm-yy',
        numberOfMonths: 2,
        minDate:0

    })
    $("#text2").datepicker
    ({
        showOn: 'button', buttonImage: 'images/cal.gif', buttonImageOnly: true,
        dateFormat: 'dd-mm-yy',
        numberOfMonths: 2,
        minDate:1

    })
})
</script> 
</head>
<body>
<form>
<input type=radio name="update" value="yes" checked onclick="setReadOnly(this)">
Radio1 <br />
<input type=radio name="update" value="no" onclick="setReadOnly(this)">
Radio2 <br />
<input name="text1" type="text">
<input name="text2" type="text">
<select name="number">
<option value="11">11</option>
<option value="12">12</option>
</select>
</form>

Ответы [ 3 ]

15 голосов
/ 05 мая 2009

В стиле jQuery вы должны изменить код в коде функции setReadOnly на: 

function setReadOnly(obj){
   if(obj.value == "yes"){
     $('#text2').css('backgroundColor','#ffffff');
     $('#text2').removeAttr('readOnly');
     $('#text2').val('');
     $('#text2').datepicker('enable');
     $('#number').removeAttr('disabled');
   } 
   else {
     $('#text2').css('backgroundColor','#eeeeee');
     $('#text2').attr('readonly','readonly');
     $('#text2').val('Not applicable!');
     $('#text2').datepicker('disable');
     $('#number').attr('disabled',true);
   }
}

РЕДАКТИРОВАТЬ: Хотя приведенный выше код работает просто отлично, как указывает @Deviant, связанные методы могут быть объединены в цепочку, чтобы в полной мере воспользоваться мощными функциями jQuery. 

function setReadOnly(obj){
   if(obj.value == "yes"){
     $('#text2').css('backgroundColor','#ffffff')
                .removeAttr('readonly')
                .val('')
                .datepicker('enable');
     $('#number').removeAttr('disabled');
   } 
   else {
     $('#text2').css('backgroundColor','#eeeeee')
                .attr('readonly','readonly')
                .val('Not applicable!')
                .datepicker('disable');
     $('#number').attr('disabled',true);
   }
}
0 голосов
/ 06 ноября 2013

DatePicker вызывается в фокусе. Код ниже остановит это в зависимости от ваших условий 

 $("#text2").bind('focus', function (e) {
               var value =  $('input[name=update]:checked').val();
               if (value == "no")
                   e.stopImmediatePropagation();                    
            });
0 голосов
/ 05 мая 2009

Попробуйте следующее в вашей setReadOnly() функции 

function setReadOnly(obj) {
    $("#text1").datepicker('disable');
    $("#text2").datepicker('disable');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...