JQuery का उपयोग करके इनपुट अक्षम विशेषता को टॉगल करें

Question

यहाँ मेरा कोड है:

$("#product1 :checkbox").click(function(){
    $(this)
        .closest('tr') // Find the parent row.
            .find(":input[type='text']") // Find text elements in that row.
                .attr('disabled',false).toggleClass('disabled') // Enable them.
                .end() // Go back to the row.
            .siblings() // Get its siblings
                .find(":input[type='text']") // Find text elements in those rows.
                .attr('disabled',true).removeClass('disabled'); // Disable them.
});

मैं कैसे टॉगल .attr('disabled',false);करूं?

मुझे यह Google पर नहीं मिल रहा है।

Comments

किसी भी कारण से आप क्षेत्र की अक्षम संपत्ति का उपयोग नहीं कर सकते हैं? $("input").get(0).disabled = isFalse;// jsfiddle.net/uAfhj

— शनिमल

मुझे डिपेंड्सऑन प्लगइन मिला जो आपको उपयोगी लग सकता है

— ऑन शॉप

Answer 1

$('#el').prop('disabled', function(i, v) { return !v; });

.prop()विधि दो तर्क स्वीकार करता है:

• संपत्ति का नाम (अक्षम, जाँच, चयनित) कुछ भी जो सही या गलत है
• संपत्ति का मूल्य , हो सकता है:
  • ( खाली ) - वर्तमान मूल्य लौटाता है।
  • बूलियन (सच्चा / गलत) - संपत्ति का मूल्य निर्धारित करता है।
  • फ़ंक्शन - प्रत्येक पाए गए तत्व के लिए निष्पादित किया जाता है, लौटे मूल्य का उपयोग संपत्ति सेट करने के लिए किया जाता है। दो तर्क दिए गए हैं; पहला तर्क सूचकांक (0, 1, 2, प्रत्येक पाया तत्व के लिए बढ़ता है) है। दूसरा तर्क तत्व का वर्तमान मूल्य (सही / गलत) है।

तो इस मामले में, मैंने एक फ़ंक्शन का उपयोग किया जिसने मुझे सूचकांक (i) और वर्तमान मूल्य (v) की आपूर्ति की, फिर मैंने वर्तमान मूल्य के विपरीत लौटा दिया, इसलिए संपत्ति की स्थिति उलट है।

Comments

के रूप में (मुझे विश्वास है) .prop () ऐसा करने का सही तरीका है और विकलांगों के लिए चीजों को स्थापित करने के उद्देश्य से ठीक से जोड़ा गया था = "अक्षम" + इसकी सुरुचिपूर्ण

— मोरवेल

क्या है iऔर v?

— मैट आर

@ मैटर मैंने एक छोटा स्पष्टीकरण जोड़ा है।

— अर्ने

यह एक महान जवाब है!

— LeBlaireau

एक अद्यतन के रूप में, यह तीर के कार्यों का उपयोग करके बहुत साफ दिखता है:$('#el').prop('disabled', (i, v) => !v);

— इग्नोसॉरस

Answer 2

मुझे लगता है कि पूर्ण ब्राउज़र तुलनात्मकता disabledको मूल्य द्वारा निर्धारित किया जाना चाहिए disabledया हटा दिया जाना चाहिए !
यहाँ एक छोटा सा प्लगइन है जिसे मैंने अभी बनाया है:

(function($) {
    $.fn.toggleDisabled = function() {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);

उदाहरण लिंक ।

EDIT: चेनबिलिटी बनाए रखने के लिए उदाहरण लिंक / कोड को अपडेट किया!
EDIT 2:
@lonesomeday टिप्पणी के आधार पर, यहां एक उन्नत संस्करण है:

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

Comments

यह काम कर सकता है, लेकिन यह धीमा होने वाला है, क्योंकि आप लगातार नए jQuery ऑब्जेक्ट बना रहे हैं। $.fn.toggleDisabled = function(){ return this.each(function(){ this.disabled = !this.disabled; });}आपको जो चाहिए वह यह है।

— लोन्सोमेडेय

@lonesomeday: मैं इस पोस्ट करने के लिए जा रहा था, लेकिन मैं करते हैं लगता है कि इस सेट / सेट नहीं करने का सही तरीका नहीं है disabledविशेषता। वैसे भी, अगर आप पुष्टि कर सकते हैं कि यह एक क्रॉस-ब्राउज़र समाधान है..मैं अपना जवाब अपडेट करूंगा।

— ifaour

किसी भी भविष्य के googlers के लिए, यह समाधान विशेषता 'आवश्यक' के लिए समान रूप से अच्छी तरह से काम करता है।

— स्काईबॉन्डर्स

prop1.6 से बेहतर विधि है, जैसा कि आर्ने ने कहा है।

— सिरो सेंटिल्ली 郝海东 冠状 iro 事件 法轮功 '

Answer 3

    $ ( '# चेकबॉक्स')। क्लिक करें (function () {
        $ ('# सबमिट')। Attr ('अक्षम'; $! (यह) .attr ('चेक'));
    });

Comments

नोट: केवल jQuery 1.6 के नीचे काम करता है। बूलियन मूल्यों को वापस पाने के लिए दोनों घटनाओं पर अटेर () के बजाय .prop () का उपयोग करें। देखें api.jquery.com/prop

— मैनुअल Arwed श्मिट

Answer 4

एक और सरल विकल्प जो चेकबॉक्स के एक क्लिक पर अपडेट होता है।

HTML:

<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>

jQuery:

$('#checkbox').click(function() {
    if (this.checked) {
        $('#item').prop('disabled', false); // If checked enable item       
    } else {
        $('#item').prop('disabled', true); // If checked disable item                   
    }
});

कार्रवाई में: लिंक

Comments

ifब्लॉक से छुटकारा पाएं$('#item').prop('disabled', this.checked);

— नईम सरफराज

Answer 5

थोड़ी देर बाद, और @ @ के लिए धन्यवाद, मैंने इस तरह के एक छोटे से फ़ंक्शन को हैंडल करने के लिए बनाया जहां इनपुट को अक्षम और छिपाया जाना चाहिए, या सक्षम और दिखाया जाना चाहिए:

function toggleInputState(el, on) {
  // 'on' = true(visible) or false(hidden)
  // If a field is to be shown, enable it; if hidden, disable it.
  // Disabling will prevent the field's value from being submitted
  $(el).prop('disabled', !on).toggle(on);
}

तब एक jQuery ऑब्जेक्ट (जैसे $ ('इनपुट [नाम = "कुछ"]')) बस का उपयोग करके स्विच किया जाता है:

toggleInputState(myElement, myBoolean)

Answer 6

यह कॉलबैक सिंटैक्स के साथ काफी सरल है attr:

$("#product1 :checkbox").click(function(){
  $(this)
   .closest('tr') // find the parent row
       .find(":input[type='text']") // find text elements in that row
           .attr('disabled',function(idx, oldAttr) {
               return !oldAttr; // invert disabled value
           })
           .toggleClass('disabled') // enable them
       .end() // go back to the row
       .siblings() // get its siblings
           .find(":input[type='text']") // find text elements in those rows
               .attr('disabled',function(idx, oldAttr) {
                   return !oldAttr; // invert disabled value
               })
               .removeClass('disabled'); // disable them
});