Question

我需要使用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;
}   
 }

Answer 1

您需要更改链接的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);

Answer 2

您是否尝试使用：

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

OR，

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

基于条件？

Answer 3

您不想更改href等属性或仅使用css。

See Doc以供参考和支持，但 IE根本不支持非svg元素。

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

Demo

$('#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;
}

Answer 4

而不是修改link元素，如何才能捕获click事件？

$('#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/

禁用所选行的href链接

4 个答案:

Demo