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);?

আমি গুগলে এটি খুঁজে পেতে পারে না।

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

(আমি বিশ্বাস করি) হিসাবে উত্সাহিত করা হয়েছে .প্রপ () এটি করার সঠিক উপায় এবং অক্ষম = "প্রতিবন্ধী" + এর মার্জিত

— মরভেল

কি iএবং v?

— ম্যাট আর

@ ম্যাটআর আমি একটি সংক্ষিপ্ত ব্যাখ্যা যুক্ত করেছি।

— আর্ন

এটি একটি দুর্দান্ত উত্তর!

— লেব্লায়রাউ

আপডেট হিসাবে, এটি তীর ফাংশনগুলি ব্যবহার করে খুব ঝরঝরে দেখাচ্ছে:$('#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);

উদাহরণ লিঙ্ক ।

সম্পাদনা: শৃঙ্খলা বজায় রাখতে উদাহরণ লিঙ্ক / কোড আপডেট করেছে!
সম্পাদনা 2:
@ একাকী মন্তব্যের উপর ভিত্তি করে, এখানে একটি বর্ধিত সংস্করণ রয়েছে:

(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অ্যাট্রিবিউট। যাইহোক, আপনি যদি নিশ্চিত করতে পারেন যে এটি একটি ক্রস-ব্রাউজার সমাধান ... আমি আমার উত্তরটি আপডেট করব।

— ifaau

ভবিষ্যতের যে কোনও গুগলারের জন্য, এই সমাধানটি 'প্রয়োজনীয়' বৈশিষ্ট্যটির জন্য সমানভাবে কাজ করে।

— স্কাইবোনসর

propআরিনের কথা অনুযায়ী ১.6 থেকে আরও ভাল পদ্ধতি।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功

Answer 3

    $ ( '# চেকবক্সটি')। ক্লিক করুন (ফাংশন () {
        $ ('# জমা')। অ্যাটর ('অক্ষম',! $ (এটি) .attr ('চেক করা'));
    });

Comments

দ্রষ্টব্য: কেবল jQuery 1.6 এর নীচে কাজ করে। বুলিয়ান মানগুলি ফিরে পেতে উভয় ঘটনায় অ্যাট্রি () এর পরিবর্তে .prop () ব্যবহার করুন। Api.jquery.com/prop

— ম্যানুয়েল আরউড শ্মিট

Answer 4

অন্য একটি সহজ বিকল্প যা চেকবক্সের একটি ক্লিকের উপর আপডেট হয়।

এইচটিএমএল:

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