微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在单选按钮上禁用jquery日期选择器

我是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',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>

解决方法

在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);
   }
}

原文地址:https://www.jb51.cc/jquery/177544.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐