JQuery для отображения текстового поля

Question

Я пытаюсь изменить стиль текстового поля, которое имеет атрибут display:none;

У меня есть еще одно текстовое поле, и когда я нажимаю в текстовом поле, я должен иметь другую в CSS, чтобы изменить в display:inline-block!important;

<input type="text" id="linkField" class="form-control " placeholder="Enter the link to track"> 
<input type="text" id="emailField" class="form-control " placeholder="Enter the Email" style="display:none!important"> 
<input type="button" class="btn-success btn lightGreen" value="SHORTEN & TRACK"> 

Я пытался что-то вроде этого, но он не работает:

$(document).ready(function() { 
    $('#linkField').click(function() { 
     $("#emailField").css({"display": "inline-block!important"}); 
    }); 
}); 

Может кто-нибудь мне помочь? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Answer 1

Вы можете использовать .show() вместо того, чтобы возиться с встроенным CSS

$(document).ready(function() { 
    $('#linkField').click(function() { 
     $("#emailField").show(); 
    }); 
}); 

DEMO

Answer 2

Demo: http://jsfiddle.net/awladnas/a6NJk/614/

Вы были очень близки к вашему решению. Попробуйте так:

$(document).ready(function() { 
    $('#linkField').click(function() { 

     $("#emailField").css('display','block'); 
    }); 
}); 

Answer 3

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

$("#emailField").css("cssText", "display: inline-block !important"); 

Я нашел это в следующем сообщении: How to apply !important using .css()?