1

我需要使用 jquery 来禁用选定行中的链接。我的代码在下面我能够禁用其他两个元素但由于某种原因我无法禁用看起来已禁用的链接但我仍然可以单击它而且它只禁用第一行中的链接我只想禁用选定的行链接。

jQuery

function groupVerificationHandler(){
$('#labelNbrFromSummary').val(labelNbrs);
$('#loadDateFromSummary').val(loadDates);
$('#typeFromSummary').val(typeFromSummary);

//check if no check box is checked-+

if(labelNbrs == ''){
    alert('You must select at least one Label!');
    return false;
}

//disable the check boxes
$('input[name=summaryCheckbox]:checkbox').each(function(){
    $(this).attr('disabled', true); 
});
//diable select button
$('#groupVerification').attr('disabled', true); 
    //disable the link
   $('#label').attr('disabled', true);  

$('#verification').load('/analysis/loadVerification',  
$('#formForSummary').serialize());

//  $('#verification').load(url, function(){});
$('#verification').show();
}

形式

<th class="cb"><input type="button" id="groupVerification" name="selectCheckBox" value="Select">                    
            </th>
<td  id="label" bgcolor='<c:out value="${summary.color}"></c:out>'><a 
                href="/analysis/loadAnalysisDetail?labelNbr=${summary.labelNbr}&loadDate=${summary.loadDate}"><c:out
                        value="${summary.labelNbr}" /> </a>

<td align='center' bgcolor='<c:out value="${summary.color}"></c:out>'>
                <input name='summaryCheckbox' type="checkbox" class="cbx" 
                       value='<c:out value="${summary.labelNbr}"></c:out>,<c:out value="${summary.loadDate}"></c:out>,<c:out value="${summary.eventInd}"></c:out>'>

启用jQuery：

function enableSelectHandler(){
var message = "You have chosen to cancel this update and will be returned to the summary screen.  \n\nDo you want to continue?";
var answer = confirm(message);
if(answer){
    $('#verification').hide();
    //disable the check boxes
    $('input[name=summaryCheckbox]:checkbox').each(function(){
        $(this).attr('disabled', false);        
    });
    //diable select button
    $('#groupVerification').attr('disabled', false);
            // enable the link
            $('#label').attr('disabled', false);

    //need to check if it is the first load for summary
    if($('#labelNbrFromSummary').val() != '') //Not first time
        labelNbrs = $('#labelNbrFromSummary').val();
    //alert(labelNbrs);
    if($('#loadDateFromSummary').val() != '')
        loadDates = $('#loadDateFromSummary').val();
    //alert(loadDates);
    if($('#typeFromSummary').val() != '')
        typeFromSummary = $('#typeFromSummary').val();
    //alert(typeFromSummary);
}else{
    return false;
}   
 }
4

4 回答 4

3

您需要更改链接的href。将外部设置td为禁用不会做任何事情。假设您不想在其他时间重新启用：

$('#label').find('a').attr('href', 'javascript:;');

如果您确实想在其他时间重新启用：

var link = $('#label').find('a').first();
var oldHref = link.attr('href');
link.data('oldHref', oldHref).attr('href', 'javascript:;');

然后稍后重新启用：

var link = $('#label').find('a').first();
var oldHref = link.data('oldHref');
link.attr('href', oldHref);
于 2013-05-06T16:13:56.623 回答
2

你有没有尝试使用：

 $(this).attr('href', '#');

或者，

 $(this).removeAttr('href');

基于条件？

于 2013-05-06T16:14:47.213 回答
2

您不想更改属性，例如href使用 css。

请参阅 Doc以获取参考和支持，但IE 完全不支持非 svg 元素。

查找pointer-events: none;这将禁用锚标记中的任何指针事件。

演示

$('#label a').addClass('disabled'); //Add the class when you need to disable and remove it when you want to re-enable.

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
于 2013-05-06T16:18:21.310 回答
2

与其修改链接元素，不如只捕获点击事件？

$('#label a').click(function(e) {
  e.preventDefault();// Disable the default action of following the link
});

如果您需要确定链接是否被禁用，您可以使用e.isDefaultPrevented()

在您决定再次启用链接的任何时候，您都可以简单地删除事件捕获：

$('#label a').unbind('click');

演示：http: //jsfiddle.net/d99wF/2/

于 2013-05-06T16:23:31.137 回答