только для чтения с помощью 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
html javascript jquery

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, они могут просто установить значение поля...

3

вы имеете в виду:

$("input").click(function() {
  if ( $(this).is('[readonly]') ) {
     $(this).removeAttr("readonly");
  } 
});

посмотреть: jsFiddle

9

указанный вами класс является "обязательным", поэтому $('.readonly').attr("readonly") == true должно быть $('.required').attr("readonly") == true и так далее

3
<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);
     });
 });
});

http://jsfiddle.net/hfK8f/

3

попробуйте это:

$('input').click(function() {
   $(this).prop('readonly', false)
});
2

попробуй такое

$(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("");
        }
    });
});

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

2
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>
2

возможно, вы хотите просто:

$('#secureFields :input').click(function() {
    $('input[readonly]').val('').removeAttr('readonly');        
});

Так как нет readonly CSS селектор в HTML, и, таким образом, ваш скрипт ничего не делает, так как он ссылается .readonly, Я должен сделать предположения о том, что вы пытаетесь сделать. Вышеизложенное сделает все поля readonly нечитаемыми и очистит текущее значение при нажатии на любой вход.

1

чтобы предотвратить автозаполнение, вы можете просто добавить autocomplete= "off"во входной тег или тег формы (если установлено для обоих, входное значение имеет приоритет, поэтому вы можете использовать autocomplete=" on " для отдельных тегов.

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

Выберите с помощью селектора атрибутов: input[readonly], чтобы выбрать входы, где существует атрибут readonly, или input[readonly= "readonly"], чтобы выбрать вход, где атрибут устанавливается сам по себе (предпочтительнее первый).

на самом деле вам не нужно выбирать только входные данные, которые имеют набор атрибутов, и вы можете написать следующее, Чтобы удалить атрибут readonly, как только он будет нажат:

$('input').click(function(){
  $(this).removeAttr('readonly')
}

тем не менее, вы, вероятно, просто хотите все время.

1