javascript - 使用 javascript 禁用 HTML 的 href

Question

如何禁用href基于数据的？下面，有一个表格将显示数据。单击时Clik Here，数据将发送到数据库。

<table>
   <thead>
     <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Button</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Mr.XX</td>
       <td>20</td>
       <td>Street XX</td>
       <td><a name=sendName id=sendId href="#" >Clik Here</a></td>
     </tr>
   </tbody>
</table>

但是，当age单元格不等于 20 时，应该禁用hreffor Click Here，以便用户无法将该数据发送到数据库。

Answer 1

我认为您可以执行以下操作：jsFiddle

HTML：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
            <th>Button</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mr.XX</td>
            <td>
                <input id="ageInput" type="text" value="20" />
            </td>
            <td>Street XX</td>
            <td><a name="sendName" id="sendId" href="#">Clik Here</a>
            </td>
        </tr>
    </tbody>
</table>

JS：

$(document).ready(function () {
    $('#ageInput').keyup(function (e) {
        var age = $(this).val();
        if (age != 20) {
            // anything what should happend if its not 20 f.e.:
            $('#sendId').hide();
        } else {
            // anything what should happend if it is 20 f.e.:
            $('#sendId').show();
        }
    });
});

Answer 2

添加onclick="return false;"

<a name=sendName id=sendId href="#" onclick="return false;" >Clik Here</a>

Answer 3

尝试可能是这样的： -

function disableLink()
    {
    if(document.getElementById(".age").innerHTML != 20)
    {
    document.getElementById('YourLink').disabled=true;
    document.getElementById('YourLink').removeAttribute('href');    
    document.getElementById('YourLink').style.textDecoration = 'none';
    document.getElementById('YourLink').style.cursor = 'default';
    }
    }

Answer 4

如果数据格式要保持一致，您应该id在表格单元格中添加一个属性来显示数据。这样javascript可以使用该方法访问它.getElementById()

Answer 5

为什么不使用 JQuery？

$("#sendId").on("click", function(){
    if ($("#age").text() != 20) {
        return false;   
    }
});

提琴手

Answer 6

在链接的单击处理程序中，获取年龄值，执行测试，如果您不希望它执行任何操作（即！== 20），则只需从处理程序返回 false，否则返回 true 以保留数据...

Answer 7

您可以尝试 HTML5 验证：

<form>
    Mr.XX
    <input id="ageInput" type="number" value="20" min="20" max="20" />
    Street XX
    <input type="submit" name="sendName" id="sendId" value="Clik Here" />
</form>

如果年龄不是数字，或者小于 20 或大于 20，则表单无效，浏览器不会发送。

演示

Answer 8

javascript: void(0)如果值不是 20 ，则将其更改为 href

JSFIDDLE：http: //jsfiddle.net/NBuxW/

使用 JQuery：

if($(".age").text() != 20) {
    $('.my-link').attr("href", "javascript: void(0)");
}

使用 Javascript：

if(document.getElementById(".age").innerHTML != 20) {
    document.getElementById(".age").href = "javascript: void(0)"
}