Отключить href HTML с помощью javascript

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

В обработчике кликов по ссылке вы можете получить значение возраста, выполнить тест и просто вернуть false из обработчика, если вы не хотите, чтобы он что-либо делал (т.е.! == 20), иначе верните true, чтобы сохранить данные ...

Answer 3

Try может быть это: -

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

добавить onclick="return false;"

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

Answer 5

если формат данных я s будет последовательным, вы должны добавить атрибут id к ячейке таблицы, которая будет отображать данные. таким образом, Javascript может получить к нему доступ с помощью метода .getElementById()

Answer 6

Сделать это изменить HREF для javascript: void(0) если значение не 20

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)" 
} 

Answer 7

Почему вы не используете JQuery?

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

JsFiddle

Answer 8

Вы можете попробовать 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