jQuery अक्षम / सबमिट बटन सक्षम करें

Question

मेरे पास यह HTML है:

<input type="text" name="textField" />
<input type="submit" value="send" />

मैं ऐसा कुछ कैसे कर सकता हूं:

• जब पाठ फ़ील्ड खाली हो तो सबमिट को अक्षम किया जाना चाहिए (अक्षम = "अक्षम")।
• जब विकलांग विशेषता को हटाने के लिए पाठ क्षेत्र में कुछ टाइप किया जाता है।
• यदि पाठ फ़ील्ड फिर से खाली हो जाता है (पाठ हटा दिया जाता है) तो सबमिट बटन को फिर से अक्षम किया जाना चाहिए।

मैंने कुछ इस तरह की कोशिश की:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

... लेकिन यह काम नहीं करता है। कोई विचार?

Comments

इस तरह से RemoveAttr ('अक्षम') का उपयोग न करें। राज्य को चालू करने के लिए प्रोप () का उपयोग करें। देखें मेरा उत्तर या आधिकारिक दस्तावेज ।

— बेसिक 6

Answer 1

समस्या यह है कि परिवर्तन की घटना केवल तब होती है जब फ़ोकस को इनपुट से दूर ले जाया जाता है (जैसे कोई इनपुट से क्लिक करता है या उसमें से टैब निकालता है)। इसके बजाय की-अप का उपयोग करने का प्रयास करें:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

Comments

ठीक है, लेकिन समस्या यह है कि जब मैं अंतिम पत्र को हटाता हूं तो मुझे खाली वैल पर कब्जा करने और अपने बटन को अक्षम करने के लिए एक बार और भी दबाया जाता है, क्योंकि जब मैं अंतिम अक्षर को हटाने के लिए बैकस्पेस दबाता हूं तो मेरा क्षेत्र अभी भी आबाद है, इसलिए मेरा कीबोर्ड पर कब्जा कर लिया है और फिर पत्र को हटा दिया गया है। तो ... मुझे यह कैसे करना चाहिए?

— किमीकुंजी

ओह, पहले कोड का परीक्षण नहीं करने के लिए मेरी माफी। यदि आप कीप के साथ कीपर की जगह लेते हैं तो क्या इससे मदद मिलती है?

— बजे एरिक पालकोविच कैरे

यदि आप कीबोर्ड का उपयोग किए बिना फ़ील्ड का मान बदलते हैं तो क्या होगा?

— नाथन

यह काम करता है, लेकिन सीएसएस को छोड़ देता है। उदाहरण के लिए, कॉलिंग $ ("# लॉगिनबटन")। बटन (); पर input id="loginButton" type="submit" name="Submit" value="Login" disabled>सीएसएस विकलांग वर्गों के साथ एक विकलांग बटन दिखाई देगा।

— Ga

प्रोप ('अक्षम', सत्य) पद्धति का उपयोग attr ('अक्षम', 'अक्षम') विधि पर किया जाना चाहिए, डॉक्स को प्रोप पर देखें ()

— मार्टिन

Answer 2

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

Comments

यह काम करता है! लेकिन..एक प्रश्न हालांकि ... क्या आप इसे समझा सकते हैं: $ (": पाठ")। कीपर (check_submit) .each (फ़ंक्शन () {check_submit ();}); धन्यवाद

— kmunky

इस एक के साथ समस्या यह है कि जब jspace या डिलीट कीज को दबाया जाता है तो jQuery की कीप इवेंट में लगातार आग नहीं लगती है। इसका मतलब है कि उपयोगकर्ता पाठ को वापस कर सकता है और फ़ंक्शन को कॉल नहीं किया जाएगा जो कि UX विफल है। मैं कीप को उन साधनों के रूप में देख रहा हूं जो ज्यादातर लोग उपयोग कर रहे हैं। मुझे यह पसंद नहीं है; मैं चाहता हूँ कि प्रतिक्रिया कीपैड पर हो लेकिन इसे खींच पाना थोड़ा मुश्किल है।

— BobRodes 11'13

Answer 3

यह प्रश्न 2 वर्ष पुराना है लेकिन यह अभी भी एक अच्छा प्रश्न है और यह पहला Google परिणाम था ... लेकिन सभी मौजूदा उत्तर HTML विशेषता (हटाने ("अक्षम")) "अक्षम" को हटाने और हटाने की सलाह देते हैं , जो नहीं है सही दृष्टिकोण। विशेषता बनाम संपत्ति को लेकर बहुत भ्रम है।

एचटीएमएल

<input type="button" disabled>मार्कअप में "अक्षम" को डब्ल्यू 3 सी द्वारा बूलियन विशेषता कहा जाता है ।

HTML बनाम DOM

उद्धरण:

एक संपत्ति DOM में है; एक विशेषता HTML में है जिसे DOM में पार्स किया गया है।

https://stackoverflow.com/a/7572855/664132

JQuery

सम्बंधित:

फिर भी, जाँच की गई विशेषता के बारे में याद रखने के लिए सबसे महत्वपूर्ण अवधारणा यह है कि यह जाँच की गई संपत्ति के अनुरूप नहीं है। विशेषता वास्तव में defaultChecked संपत्ति से मेल खाती है और केवल प्रारंभिक मूल्य निर्धारित करने के लिए इस्तेमाल किया जाना चाहिए चेकबॉक्स की। चेक किया गया गुण मान चेकबॉक्स की स्थिति के साथ परिवर्तित नहीं होता है, जबकि चेक की गई संपत्ति करता है। इसलिए, यह निर्धारित करने के लिए क्रॉस-ब्राउज़र-संगत तरीका है कि चेकबॉक्स चेक किया गया है, तो संपत्ति का उपयोग करना है ...

से मिलता जुलता:

गुण आमतौर पर क्रमबद्ध HTML विशेषता को बदले बिना एक DOM तत्व की गतिशील स्थिति को प्रभावित करते हैं। उदाहरणों में इनपुट तत्वों की मूल्य संपत्ति, इनपुट और बटन की अक्षम संपत्ति या चेकबॉक्स की चेक की गई संपत्ति शामिल है। .Pr () विधि के बजाय .prop () विधि को अक्षम और जाँचने के लिए उपयोग किया जाना चाहिए।

$( "input" ).prop( "disabled", false );

सारांश

[...] के रूप में इस तरह के रूप में [...] निष्क्रिय तत्वों के तत्वों को अक्षम करें, .prop () विधि का उपयोग करें ।

( http://api.jquery.com/attr/ )

---

प्रश्न के परिवर्तन भाग पर अक्षम के लिए: "इनपुट" नामक एक घटना है, लेकिन ब्राउज़र समर्थन सीमित है और यह एक jQuery घटना नहीं है, इसलिए jQuery इसे काम नहीं करेगा। परिवर्तन घटना मज़बूती से काम करती है, लेकिन जब तत्व ध्यान केंद्रित करता है तो निकाल दिया जाता है। तो एक दो को जोड़ सकता है (कुछ लोग कीप और पेस्ट के लिए भी सुनते हैं)।

यहाँ कोड का एक अनुपयोगी टुकड़ा है जो यह दर्शाता है कि मेरा क्या मतलब है:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

Comments

उस जानकारी के लिए धन्यवाद, लेकिन यह वास्तव में यह नहीं कहता है कि यदि विशेषता का उपयोग करने से क्रॉस-ब्राउज़र-संगतता का नुकसान होगा, जैसे कि समस्या। क्या विशेषता का उपयोग करने से वास्तव में समस्या होती है?

— क्रिस जेजे

Upvoted, लेकिन मुझे उन विशिष्ट मामलों को जानने में भी दिलचस्पी होगी जहां विशेषता के मुद्दों को बदलते हुए, जैसा कि @ChrisJJ ने उल्लेख किया है।

— आर्मफूट

Answer 4

अक्षम विशेषता उपयोग को हटाने के लिए,

 $("#elementID").removeAttr('disabled');

और अक्षम विशेषता उपयोग जोड़ने के लिए,

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

का आनंद लें :)

Answer 5

या हमारे लिए जो हर छोटी चीज़ के लिए jQ का उपयोग करना पसंद नहीं करते हैं:

document.getElementById("submitButtonId").disabled = true;

Comments

ऐसा नहीं है कि आप Javascript शाकाहारी और सब कुछ कर रहे हैं बहुत अच्छा है, लेकिन यह वास्तव में इस सवाल का जवाब नहीं है सब पर ।

— मिशेल

25 अपवोट्स प्राप्त करने वाले इस उत्तर में दुनिया भर में बहुत भद्दा कोड बताया गया है: /

— o0 '।

Answer 6

एरिक, आपका कोड मेरे लिए काम नहीं करता था जब उपयोगकर्ता पाठ में प्रवेश करता है तो सभी पाठ को हटा देता है। मैं एक और संस्करण बनाया अगर किसी को भी एक ही समस्या का अनुभव किया। यहाँ फिर जाओ लोगों:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

Answer 7

यह इस तरह काम करेगा:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

सुनिश्चित करें कि आपके HTML में एक 'अक्षम' विशेषता है

Answer 8

यहाँ फ़ाइल इनपुट क्षेत्र के लिए समाधान है ।

फ़ाइल फ़ील्ड के लिए सबमिट बटन को अक्षम करने के लिए जब कोई फ़ाइल नहीं चुनी जाती है, तो उपयोगकर्ता को अपलोड करने के लिए फ़ाइल चुनने के बाद सक्षम करें:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

एचटीएमएल:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

Answer 9

आप भी कुछ इस तरह का उपयोग कर सकते हैं:

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

यहाँ लाइव उदाहरण है

Comments

यह वही है जो मेरे लिए काम करता है। मैंने एब्स का परीक्षण किया लेकिन उनके साथ कुछ समस्या थी। थैंक यू सोनू!

— गियोकोड

Answer 10

फॉर्म लॉगिन के लिए:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

जावास्क्रिप्ट:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

Answer 11

यदि बटन अपने आप में एक jQuery स्टाइल बटन (साथ। बटन) () है तो आपको बटन की स्थिति को ताज़ा करने की आवश्यकता होगी ताकि आपके द्वारा हटाए गए / अक्षम किए गए विशेषता को एक बार सही वर्ग जोड़ / हटा दिया जाए।

$( ".selector" ).button( "refresh" );

Comments

@The_Black_Smurf मैंने इसे भविष्य में किसी की मदद करने के मामले में जोड़ा - इसमें नुकसान क्या है?

— टॉम चैंबरलेन

वाह। सुनने के लिए दुख की बात है jQuery के स्वचालित ताज़ा यहाँ काम नहीं कर रहा है। धन्यवाद!

— क्रिसजज

Answer 12

ऊपर दिए गए उत्तर मेनू आधारित कट / पेस्ट घटनाओं के लिए भी जांच नहीं करते हैं। नीचे दिए गए कोड का उपयोग मैं दोनों को करने के लिए करता हूं। ध्यान दें कि क्रिया वास्तव में एक टाइमआउट के साथ होती है क्योंकि कट और पिछले ईवेंट वास्तव में परिवर्तन होने से पहले फायर करते हैं, इसलिए टाइमआउट को होने के लिए थोड़ा समय देता है।

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

Answer 13

वेनिला जेएस समाधान। यह न केवल एक इनपुट के लिए पूरे फॉर्म के लिए काम करता है।

प्रश्न में चयनित जावास्क्रिप्ट टैग।

HTML फॉर्म:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })

<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

कुछ स्पष्टीकरण:

इस कोड में हम HTML फॉर्म में और प्रत्येक की-वर्ड पर की-अप इवेंट जोड़ते हैं, जो सभी इनपुट फील्ड्स को चेक करते हैं। यदि हमारे पास कम से कम एक इनपुट फ़ील्ड खाली है या केवल अंतरिक्ष वर्ण हैं तो हम अक्षम चर और अक्षम सबमिट बटन को सही मान प्रदान करते हैं।

यदि आपको सबमिट बटन को निष्क्रिय करने की आवश्यकता है, जब तक कि सभी आवश्यक इनपुट फ़ील्ड भर न जाएं - प्रतिस्थापित करें:

inputs.forEach(function(input, index) {

साथ में:

required_inputs.forEach(function(input, index) {

जहाँ आवश्यक_इनपुट पहले से ही आवश्यक इनपुट फ़ील्ड वाले सरणी घोषित किए गए हैं।

Answer 14

हम बस हो सकता है और अगर

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

वरना हम झूठ को सच में बदल सकते हैं

Answer 15

अक्षम: $('input[type="submit"]').prop('disabled', true);

सक्षम करें: $('input[type="submit"]').removeAttr('disabled');

उपरोक्त सक्षम कोड इससे अधिक सटीक है:

$('input[type="submit"]').removeAttr('disabled');

आप दोनों विधियों का उपयोग कर सकते हैं।

Comments

सिर्फ उपयोग में सक्षम करने के लिए .प्रॉप ('अक्षम', गलत);

— rahim.nagori

Answer 16

मुझे इस फिट का उपयोग करने के लिए थोड़ा काम करना पड़ा।

मेरे पास एक फॉर्म है जहां सबमिट करने से पहले सभी फ़ील्ड का मान होना चाहिए।

यहाँ मैंने क्या किया है:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

यहाँ उनके उत्तर के लिए सभी का धन्यवाद।

Answer 17

सबमिट बटन को सक्षम या अक्षम करने के लिए कृपया नीचे दिया गया कोड देखें

यदि नाम और शहर के क्षेत्रों का मूल्य है तो केवल सबमिट बटन सक्षम किया जाएगा।

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>

<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>

Comments

बस picky होने के लिए, आपको बटन को सक्षम करने से पहले (कम से कम) दूसरे वर्ण तक इंतजार नहीं करना चाहिए? ;-)

— क्रिस पिंक

Answer 18

मेरे प्रोजेक्ट से इस स्निपेट को देखें

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

इसलिए आपके ऑपरेशन को निष्पादित करने के बाद बटन को अक्षम कर दिया

$(this).attr('disabled', 'disabled');

Answer 19

अल प्रकार के घोल की आपूर्ति की जाती है। इसलिए मैं एक अलग समाधान के लिए प्रयास करना चाहता हूं। यदि आप idअपने इनपुट फ़ील्ड में कोई विशेषता जोड़ते हैं तो बस यह अधिक आसान होगा ।

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

अब यहाँ तुम्हारा है jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

Answer 20

मुझे आशा है कि नीचे दिए गए कोड से किसी को मदद मिलेगी .. !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/