только для чтения с помощью jquery
Я пытаюсь добавить readonly ко всем входам, а затем нажмите Удалить readonly, чтобы он работал для ввода. readonly набор для всех входов часть работает, но удалить по щелчку не работает, пожалуйста, помогите.
мой код :
<script language="javascript">
$(document).ready(function()
{
$('#secureFields :input').attr('readonly', true);
$('.readonly').click(
function()
{
if ($('.readonly').attr("readonly") == true)
{
$('.readonly').val('');
$('.readonly').removeAttr("readonly");
}
});
});
</script>
html выглядит так:
<table class='table' id='secureFields' >
<tr>
<td width=200>First Name:</td>
<td><input readonly='readonly' type='text' name='firstname' size=30 class='required'/></td>
</tr>
<tr>
9 ответов
важное примечание: не пишите language="javascript"
но type="text/javascript"
вы должны выбрать входные данные с attribute
только для чтения, а не class
только для чтения.
Итак, сделайте следующее:
$('input[readonly]').click(
вместо
$('.readonly').click(
и тогда вам просто нужно одну строку:
$(this).removeProp("readonly");
это правильный код:
$('input[readonly]').click(function(){
$(this).removeProp("readonly");
});
Проверьте Examplefiddle
FYI: сценарий не остановлен вашим readonly
, они могут просто установить значение поля...
вы имеете в виду:
$("input").click(function() {
if ( $(this).is('[readonly]') ) {
$(this).removeAttr("readonly");
}
});
посмотреть: jsFiddle
указанный вами класс является "обязательным", поэтому $('.readonly').attr("readonly") == true
должно быть
$('.required').attr("readonly") == true
и так далее
<html>
<table class='table' id='secureFields'>
<tr>
<td width=200>First Name:</td>
<td><input type='text' name='firstname' size=30 class='required'/></td>
</tr>
</table>
<button id="btnEnableInputs" type="button">Enable!</button>
</html>
$(document).ready(function() {
$("#secureFields :input").each(function() {
$(this).attr("readonly", true);
});
$("#btnEnableInputs").click(function() {
$("#secureFields :input").each(function() {
$(this).attr("readonly", false);
});
});
});
попробуй такое
$(document).ready(function () {
$('#secureFields :input').attr('readonly', true);
$('input[readonly]').click(
function (event) {
if ($(event.currentTarget).attr("readonly") == "readonly") {
$(event.currentTarget).removeAttr("readonly");
$(event.currentTarget).val("");
}
});
});
это изменяет атрибут только для чтения на входе, который был нажат, надеюсь, это поможет
comment the script part/**/ to check readonly mode
<body>
<table class='table' id='secureFields' >
<tr>
<td width=200>First Name:</td>
<td><input readonly="readonly" type='text' name='firstname' size=30 class='required'/></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(document).ready(function()
{
$('#secureFields:input').attr('readonly', true);
$('.required').val('');
$('.required').focus(
function()
{
if ($('.required').attr("readonly") == true)
{
$('.required').removeAttr("readonly");
}
});
});
</script>
возможно, вы хотите просто:
$('#secureFields :input').click(function() {
$('input[readonly]').val('').removeAttr('readonly');
});
Так как нет readonly
CSS селектор в HTML, и, таким образом, ваш скрипт ничего не делает, так как он ссылается .readonly
, Я должен сделать предположения о том, что вы пытаетесь сделать. Вышеизложенное сделает все поля readonly нечитаемыми и очистит текущее значение при нажатии на любой вход.
чтобы предотвратить автозаполнение, вы можете просто добавить autocomplete= "off"во входной тег или тег формы (если установлено для обоих, входное значение имеет приоритет, поэтому вы можете использовать autocomplete=" on " для отдельных тегов.
в любом случае,.селектор выбирает элементы с определенным классом, а не атрибут. Вы можете:
Выберите с помощью селектора атрибутов: input[readonly], чтобы выбрать входы, где существует атрибут readonly, или input[readonly= "readonly"], чтобы выбрать вход, где атрибут устанавливается сам по себе (предпочтительнее первый).
на самом деле вам не нужно выбирать только входные данные, которые имеют набор атрибутов, и вы можете написать следующее, Чтобы удалить атрибут readonly, как только он будет нажат:
$('input').click(function(){
$(this).removeAttr('readonly')
}
тем не менее, вы, вероятно, просто хотите все время.