किसी इनपुट को आसानी से बनाने के लिए मैं jQuery का उपयोग कैसे कर सकता हूं?

142

मेरे पास निम्नलिखित इनपुट हैं:

  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>

मैं इस तत्व को तत्व या इसके मूल्य को बदले बिना केवल पढ़ने के लिए jQuery का उपयोग कैसे कर सकता हूं?

jquery

— useranon
स्रोत

255

इन दिनों jQuery 1.6.1 या इसके बाद के संस्करण की सिफारिश की जाती है। बूलियन विशेषताओं / गुणों को सेट करते समय .prop () का उपयोग किया जाता है।

$("#fieldName").prop("readonly", true);

— Gourneau
स्रोत

89

बस निम्नलिखित विशेषता जोड़ें

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

jQuery (स्थानापन्न तत्व का परिवर्तन करना disabledके लिए readonlyसेटिंग के लिए निम्नलिखित में readonlyविशेषता)।

$('#fieldName').attr("disabled","disabled")

या

$('#fieldName').attr("disabled", true)

नोट: jQuery 1.6 के रूप में, के .prop()बजाय का उपयोग करने के लिए सिफारिश की है .attr()। उपरोक्त कोड स्थानापन्न को छोड़कर बिल्कुल वैसा ही काम करेंगे .attr()के लिए .prop()।

— रस कैम
स्रोत

4

किसी फ़ील्ड को अक्षम करना वैसा ही नहीं है जैसा वह संपादन योग्य नहीं है, ठीक है? इसे निष्क्रिय करने से यह जमा नहीं होगा

— डेव

2

@ सही है। इसके अलावा आसानी से इनपुट पर ध्यान केंद्रित किया जा सकता है, विकलांग इनपुट नहीं कर सकते हैं

— रेज़ कैम

75

इनपुट का आसानी से उपयोग करने के लिए:

 $("#fieldName").attr('readonly','readonly');

इसे पढ़ने / लिखने के उपयोग के लिए:

$("#fieldName").removeAttr('readonly');

disabledविशेषता जोड़ने से मान पोस्ट के साथ नहीं भेजा जाएगा।

— रीम
स्रोत

7

आप इसे केवल इसे चिह्नित करके disabledया कर सकते हैं enabled। आप ऐसा करने के लिए इस कोड का उपयोग कर सकते हैं:

//for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);

या

$ ('# फ़ील्डनाम ’)। प्रोप (# आसानी से’, सच);

$ ('# फ़ील्डनाम')। प्रोप ('आसानी से', गलत);

--- एटर के बजाय प्रोप का उपयोग करना बेहतर है।

— pixellab
स्रोत

7

विकलांग इनपुट फॉर्म पोस्ट / प्राप्त करने पर जमा नहीं होते हैं।

— नील्सव

4

टेक्स्ट बॉक्स ReadOnly या Not बनाने के लिए इस उदाहरण का उपयोग करें।

<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />

<script>

    $(document).ready(function(){
       ('.Btn_readOnly').click(function(){
           $("#txt").prop("readonly", true);
       });

       ('.Btn_notreadOnly').click(function(){
           $("#txt").prop("readonly", false);
       });
    });

</script>

— गोपकुमार एपी
स्रोत

3

दो विशेषताएँ हैं, अर्थात् readonlyऔर disabledअर्ध-केवल-पढ़ने के लिए इनपुट बना सकते हैं। लेकिन उनके बीच एक छोटा सा अंतर है।

<input type="text" readonly />
<input type="text" disabled />

readonlyविशेषता अपने इनपुट पाठ विकलांग बनाता है, और उपयोगकर्ताओं के लिए यह अब और बदलने में सक्षम नहीं हैं।
न केवल disabledविशेषता आपके इनपुट-पाठ को अक्षम (अपरिवर्तनीय) बनाएगी, बल्कि इसे सबमिट भी नहीं किया जा सकता है ।

jQuery दृष्टिकोण (1):

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

jQuery दृष्टिकोण (2):

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

जावास्क्रिप्ट दृष्टिकोण:

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

पीएस के propसाथ पेश किया jQuery 1.6।

— एलियास हदीज़ादेह
स्रोत

0

दिया हुआ -

<input name="foo" type="text" value="foo" readonly />

यह काम करता है - (jquery 1.7.1)

$('input[name="foo"]').prop('readonly', true);

आसानी से और आसानी से परीक्षण किया गया - दोनों ने काम किया।

— नवनीत चंदन
स्रोत

-1

शायद विकलांगों का उपयोग करें:

<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />

या सिर्फ लेबल टैग का उपयोग करें;)

<label>

— IProblemFactory
स्रोत

1

प्रश्न में कहा गया है कि "jQuery के साथ" (जिसका अर्थ है कि इसे गतिशील रूप से किया जाना चाहिए) और "रीड-ओनली" (जो कि अक्षम के लिए अलग है)।

— क्वेंटिन

-1

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
    </div>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#fieldName').attr('disabled', 'disabled');

    });
</script>
</html>

— राघव
स्रोत

-1

शायद इसे जोड़ना भी सार्थक है

$('#fieldName').prop('readonly',false);

टॉगल विकल्प के रूप में इस्तेमाल किया जा सकता है।

— जोश पुले
स्रोत

मैंने jQuery 3.3.1 के साथ यह कोशिश की और यह केवल readonlyमूल्य को पारित किए बिना, तत्व में एक विशेषता जोड़ता है । तो आपका उदाहरण इनपुट फ़ील्ड को केवल रीड-ओनली बनाना होगा, भले ही ओस्टेन्सेबल रूप से गलत को मान सेट करने के बावजूद।

— TMN

-1

JQuery 1.12.1 में, मेरा एप्लिकेशन कोड का उपयोग करता है:

$('"#raisepay_id"')[0].readOnly=true;

$('"#raisepay_id"')[0].readOnly=false;

और यह काम करता है।

— पी
स्रोत

-2

SetReadOnly (राज्य) रूपों के लिए बहुत उपयोगी है, हम किसी भी क्षेत्र को सीधे या विभिन्न स्थिति से setReadOnly (राज्य) में सेट कर सकते हैं। लेकिन मैं चयनकर्ता को अपारदर्शिता सेट करने के लिए readOnly का उपयोग करना पसंद करता हूं अन्यथा attr = 'अक्षम' की तरह भी काम किया जाता है उसी तरह।

आसानी से उदाहरण:

$('input').setReadOnly(true);

या जैसे विभिन्न संहिताओं के माध्यम से

var same = this.checked;
$('input').setReadOnly(same);

यहाँ हम चेकबॉक्स क्लिक के आधार पर इनपुट से आसानी से विशेषता सेट और निकालने के लिए स्टेट बूलियन मान का उपयोग कर रहे हैं।

— pixellabme
स्रोत

उपरोक्त उदाहरण काम नहीं करते - setReadOnly एक कार्य jquery या किसी भी ब्राउज़र में निर्मित नहीं है

— डेव बी 84

-3

Html में

$('#raisepay_id').attr("readonly", true) 

$("#raisepay_id").prop("readonly",true);

बूटस्ट्रैप में

$('#raisepay_id').attr("disabled", true) 

$("#raisepay_id").prop("disabled",true);

JQuery एक बदलती लाइब्रेरी है और कभी-कभी वे नियमित सुधार करते हैं। .attr () का उपयोग HTML टैग्स से विशेषताएँ प्राप्त करने के लिए किया जाता है, और जबकि यह पूरी तरह कार्यात्मक है .prop () को बाद में और अधिक अर्थपूर्ण जोड़ा गया और यह 'चेक' और 'चयनित' जैसे मूल्य-कम विशेषताओं के साथ बेहतर काम करता है।

यह सलाह दी जाती है कि यदि आप JQuery के बाद के संस्करण का उपयोग कर रहे हैं तो आपको जब भी संभव हो .prop () का उपयोग करना चाहिए।

— राजा राम टी
स्रोत

2

मैंने इसे नीचे वोट दिया क्योंकि यह निरर्थक है। यह सभी HTML, जावास्क्रिप्ट और बूटस्ट्रैप jQuery का उपयोग करता है ताकि तथ्य भी प्रासंगिक न हो। इसके अतिरिक्त विकलांग और पढ़ा जाने वाली केवल दो अलग-अलग चीजें हैं जो बूटस्ट्रैप का उपयोग किया जाता है या नहीं, इसके बारे में स्वतंत्र काम करती हैं।

— सिमोंटप्लर