Question

我有一个名为#ddlDateRange的ASP.NET下拉列表，其中包含多个项目。下拉列表中的可能值为：

Year - Current
Year - Previous
Year - Custom

我有两个名为txtStartDate和txtEndDate的文本框，它们根据用户从下拉列表中选择的内容填充值。（即txtStartDate = '01 -01-2010'和txtEndDate = '12 -31-2010'）如果用户选择Year - Previous。

我还在文本框的右侧有两个日历控件。这些jquery日历控件允许最终用户选择他们选择自定义日期的自定义日期范围 IF 。页面的jquery部分是：

        $("#<%#ddlDateRange.ClientID%>").blur(function() {
            var value = $('#<%#ddlDateRange.ClientID%>').val();
            var lowerCaseValue = value.toLowerCase();

            if (lowerCaseValue.indexOf('custom') > -1) {
                alert('You selected custom date range: ' + lowerCaseValue);
                // enable the calendar controls                    
            } else {
                alert('You DID NOT select a custom date range: ' + lowerCaseValue);
                // disable the calendar controls
                // .dp-choose-date
                $("a").click(function(e) {
                    alert('howdy!');
                    e.preventDefault();
                });
            }
        });

除了else块之外，代码工作正常。我想禁用具有“dp-choose-date”类的锚标记。

<div class="caption">Start Date:</div>
<div class="dateCell">
    <input name="ctl00$Tabs$Panel1$txtStartDate" type="text" 
           id="ctl00_Tabs_Panel1_txtStartDate" class="date-pick" 
           style="width:125px;" />
    <a href="#" class="dp-choose-date" title="Choose date">Choose date</a>
</div>
<br />

我知道我可以使用preventDefault来阻止单击超链接时的默认操作，但是当我尝试在Firebug中调试时，警报（'你好'）永远不会被触发。我相信原因是因为我没有点击链接正确，在下拉列表失去焦点后才有意义。

所以我的问题是，如何禁用链接？我也尝试过：

$("a .dp-choose-date").click(function(e) {
    alert('Howdy!');
    e.preventDefault();
});

作为我的选择器。但我仍然能够点击我不想要的链接。在渲染标记中，文本框中使用的“日期选择”类生成带有“dp-choose-date”属性的锚标记，因此我不确定是否可以切换此类。

如果有人有任何建议，我会全力以赴......

Answer 1

只需删除这样的href attribue：

$("a.dp-choose-date").attr({"href":""});

还有你的代码：

$("a .dp-choose-date").click(function(e) {
    alert('Howdy!');
    e.preventDefault();
});

它应该是a.dp-choose-date而不是a .dp-choose-date请注意元素及其类名之间不能有任何空格。

Answer 2

我的建议是做这样的事情：

var blurred = true
$("#").focus(function(){
    blurred = false;
});
$("#").blur(function() {
    var value = $('#').val();
    var lowerCaseValue = value.toLowerCase();

    if (lowerCaseValue.indexOf('custom') > -1) {
        alert('You selected custom date range: ' + lowerCaseValue);
        // enable the calendar controls                    
    } else {
        alert('You DID NOT select a custom date range: ' + lowerCaseValue);
        // disable the calendar controls
        // .dp-choose-date
        blurred = true;
    }
});

$("a.dp-choose-date").click(function(e) {
    if ( blurred ){
        alert('howdy!');
        e.preventDefault();
    }
});

现在，每次失去焦点时，您都会向a标记添加点击事件。这不仅是不必要的，而且当用户与页面交互时可能导致性能问题。

jquery禁用下拉列表中的链接

2 个答案: