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时，应禁用href 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

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

Answer 4

尝试可能是这样的： -

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 5

如果数据格式保持一致，则应向表格单元格添加id属性以显示数据。这样javascript就可以使用.getElementById()

方法访问它

Answer 6

为什么不使用JQuery？

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

JsFiddle

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，则表格无效，浏览器也不会发送。

Demo

Answer 8

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

JSFIDDLE HERE：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)"
}

使用javascript禁用HTML的href

8 个答案: