Отключить ссылку кнопку, если textarea пуста

Question

У меня есть основной щелчок кнопки, который добавляет текст перетаскиваемый div. Чтобы вызвать событие кнопки, текст должен быть введен в текстовое поле. Это всего лишь простой способ проверки пустых полей. Он хорошо работает с кнопкой. Проблема теперь я использую link button, но я пытаюсь отключить его, используя e.preventDefault(), но он не работает. JSFIDDLE

$('.form-control').prop('disabled',true); 
$('textarea').keyup(function (e){ 
     //$('#button').prop('disabled', this.value == "" ? true : false); 
     $('#button').prop(this.value == "" ? e.preventDefault() : false); 
}); 

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea> 
<br/> 
<!--input type="button" id="button" disabled="disabled" value="Add Div with Text" /--> 
<a href="#" id="button" role="button"><i class="fa fa-plus"></i> Post Sticky</a> 
<br/> 
<div> 
    <div class="middle-side empty"></div> 

</div> 

Answer 1

Вы можете просто проверить для textarea значения и предотвратить поведение на #button Обработчик кликов, если значение textarea неверно (например, пусто).

Updated fiddle

$('#button').click(function (e) 
{ 
    if ($('textarea').val() == "") 
    { 
     return false; 
    } 
    ... other code 

Answer 2

По сути все, что вы должны сделать, это проверить значение текстового поля первых, в обработчике кнопки событий. Вы можете сделать это так:

var text = $('textarea').val(); 
if(text == ''){ 
    return; 
} 

Вот обновленная скрипка: http://jsfiddle.net/0wbnud4k/57/

Edit: Вы можете также заменить return; с preventDefault();

Answer 3

Вот кое-что может помочь вам, а не только с фоновым функциональностью, а также с визуальным стилем.

$(document).ready(function(){ 
    function changeMyBTN(a) { 
     if (a == false) { 
      //Adds a Class name for the visual styling 
      $('a[id="button"][role="button"]').addClass('aBTNdisabled'); 
      //Capture and prevents events to the BTN 
      $('a[id="button"][role="button"][class="aBTNdisabled"]').click(function(e) { e.preventDefault();}); 
     } else { 
      //Remove class name if BTN should be enabled 
      $('a[id="button"][role="button"]').removeClass('aBTNdisabled'); 
     } 
    } 
    $('textarea').keyup(function (e){ 
     if ($(this).val() != "") { 
      //Enables BTN 
      changeMyBTN(true); 
     } else { 
      //Disables BTN 
      changeMyBTN(false); 
     } 
    }); 
    /* This captures the mouse event if BTN is enabled */ 
    $('a[id="button"][role="button"]:not([class="aBTNdisabled"])').click(function() { 
     /* Create the event action when clicking the link btn */ 
     //document.location.href="http://www.google.com"; 
     alert($('textarea').val()); 
    }); 
    /* Sets the default state of the btn */ 
    changeMyBTN(false); 

});