使用 javascript 禁用 HTML 的 href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18512683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable href of HTML using javascript
提问by art
How do I disable an hrefbased on data? Below, there is a table that will display the data. When the Clik Hereis clicked, the data will be sent to the database.
如何禁用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>
However, when the agecell is not equal to 20, the hreffor Click Hereshould be disabled, so that the user cannot send that data to the database.
但是，当age单元格不等于 20 时，应该禁用hreffor Click Here，这样用户就无法将该数据发送到数据库。
采纳答案by Martin
I think you can do something like: jsFiddle
我认为您可以执行以下操作：jsFiddle
HTML:
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:
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();
}
});
});
回答by Matt Indeedhat Holmes
add onclick="return false;"
添加 onclick="return false;"
<a name=sendName id=sendId href="#" onclick="return false;" >Clik Here</a>
<a name=sendName id=sendId href="#" onclick="return false;" >Clik Here</a>
回答by djiango
if the data format is going to be consistent, you should add an idattribute to the table cell that will display the data. this way javascript can access it using the method .getElementById()
如果数据格式要保持一致，您应该id向将显示数据的表格单元格添加一个属性。这样javascript可以使用该方法访问它.getElementById()
回答by LDJ
In your click handler for the link, get the age value, perform the test and simply return false from the handler if you dont want it to do anything (i.e. !== 20), else return true to persist the data...
在链接的单击处理程序中，获取年龄值，执行测试，如果您不想让处理程序执行任何操作（即 !== 20），则只需从处理程序返回 false，否则返回 true 以保留数据...
回答by Rahul Tripathi
Try may be this:-
尝试可能是这样的：-
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';
}
}
回答by Oriol
You can try HTML5 validation:
您可以尝试 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>
If the age is not a number, or if it's less than 20, or greater than 20, the form won't be valid and the browser won't send it.
如果年龄不是数字，或者小于 20 或大于 20，则表单将无效并且浏览器不会发送它。
回答by kgd
回答by Simon Staton
Make it change the href to javascript: void(0)if the value is not 20
javascript: void(0)如果值不是 20 ，则将其更改为 href
JSFIDDLE HERE: http://jsfiddle.net/NBuxW/
JSFIDDLE 在这里：http: //jsfiddle.net/NBuxW/
Using JQuery:
使用 JQuery：
if($(".age").text() != 20) {
$('.my-link').attr("href", "javascript: void(0)");
}
Using Javascript:
使用 JavaScript：
if(document.getElementById(".age").innerHTML != 20) {
document.getElementById(".age").href = "javascript: void(0)"
}
