2012-06-13 14 views
9

Próbuję dodać readonly do wszystkich wejść, a następnie kliknij przycisk Usuń tylko do odczytu, aby działało do pisania. Ustawiony tylko do odczytu dla wszystkich wejść część działa, ale usuwanie po kliknięciu nie działa, proszę o pomoc.readonly z jquery

mój kod:

<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 jest tak:

<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> 
+0

ważna uwaga. Nie napisać 'language = "javascript"' 'ale type = "text/javascript"' – Christoph

+0

Spróbuj tak 'if ($ (”. Tylko do odczytu ') attr (' tylko do odczytu ') ==' readonly ') ' – jakee

+1

aby zapobiec automatycznemu wypełnianiu narzędzi, chciałbyś, żeby użytkownik wstawił te pola ręcznie – Abude

Odpowiedz

3

Ważna uwaga : nie pisz language="javascript", ale type="text/javascript"

Musisz wybrać wejścia z attribute tylko do odczytu, a nie class tylko do odczytu.

Więc wykonaj następujące czynności:

$('input[readonly]').click(

zamiast

$('.readonly').click(

i wtedy wystarczy jeden wiersz:

$(this).removeProp("readonly"); 

Jest to prawidłowy kod:

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

Sprawdź Examplefiddle

FYI: Skrypt nie może zatrzymana przez readonly, po prostu ustawić wartość pola ...

+0

próbowałem teraz, ale nie działa :( – Abude

+1

@Abude sprawdź przykład. Działa. aps jest coś jeszcze nie tak z twoim kodem. – Christoph

+1

@Abude Ważna uwaga: Aby to działało, potrzebna jest wersja 1.7 jQuery! (Inaczej musisz użyć 'removeAttr') – Christoph

3

klasa podałeś jest 'niezbędna' tak $('.readonly').attr("readonly") == true powinny być $('.required').attr("readonly") == true i tak dalej

+0

tak, zrobiłem błąd w poście, ale w rzeczywistości jest. wymagany, ale nadal nie działa, czy potrzebuję czegoś innego, jak jquery 1.2? – Abude

+0

czy możesz wysłać cały kod, będę wyglądał – Subash

2

spróbuj tego:

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

nie działa ... :( – Abude

+1

@Abude jest tam jakakolwiek klasa readonly? – undefined

+0

tak, klasa jest wymagana, był błąd w moim poście – Abude

9

Czy chodziło Ci o:

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

Patrz: jsFiddle

+0

nie działa ... :( – Abude

+1

sprawdź link jsfiddle ... czy nie miałeś na myśli czegoś takiego ... –

2

spróbować

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

to zmiany atrybutu tylko do odczytu na wejściu, który został kliknięty, nadzieję, że to pomaga

+0

nie pomogło ... :(dzięki – Abude

1

Być może chcesz po prostu:

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

Ponieważ w kodzie HTML nie ma selektora CSS readonly, a zatem twój skrypt nic nie robi, ponieważ odwołuje się do .readonly, muszę przyjąć założenia dotyczące tego, co próbujesz zrobić. Powyższe spowoduje, że wszystkie pola tylko do odczytu będą nieczytane i usunie bieżącą wartość po kliknięciu dowolnego wejścia.

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/

+0

dziękuję, ale nie różdżkę przycisku, chcę kliknij na – Abude

+0

@Abude - Zmień $ ("# btnEnableInputs") na $ (". Readonly"). Kliknij –

1

Aby zapobiec autouzupełniania, można po prostu dodać autocomplete = „off” w tagu wejściowego lub tagu formularza (jeśli ustawione na obu, wartość wejściowa ma pierwszeństwo, więc można używać autouzupełniania = „on” dla poszczególnych znaczników

Anyways The .selector wybiera elementy o określonej klasy, nie przypisują można:..

Wybierz za pomocą selektora atrybutu: wejściowy [tylko do odczytu], aby wybrać, gdzie wejść tylko do odczytu atrybut istnieje lub wprowadź [ readonly = "readonly"], aby wybrać wejście, w którym atrybut jest ustawiony na siebie (pierwszy jest preferowany).

W rzeczywistości, nie ma potrzeby, aby wybrać tylko te, które mają wejść atrybut ustawiony i można napisać następujące czynności, aby usunąć atrybut tylko do odczytu, jak tylko zostanie kliknięty:

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

Mimo to, prawdopodobnie po prostu chcę < Autouzupełnianie wejścia = "off" ... > przez cały czas.

+0

Chcę rozwiązać automatyczne wypełnianie, nie automatycznie ukończone, narzędzia autouzupełniania zapisują informacje, hasła, dane ..etc, a następnie z jednym wypełnieniem wpisuje wszystkie pola ... – Abude

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> 
+0

dzięki, rozwiązany :) – Abude

+0

serdecznie zapraszamy :-) – jathin

Powiązane problemy