JQuery দিয়ে কোনও ইনপুট অক্ষম / সক্ষম করবেন?


2290
$input.disabled = true;

অথবা

$input.disabled = "disabled";

মানক কোনটি? এবং, বিপরীতে, আপনি কীভাবে অক্ষম ইনপুট সক্ষম করবেন?



1
আমি ডিপেন্ডসঅন প্লাগইনটি পেয়েছি যা আপনি দরকারী হিসাবে পেতে পারেন
অনশপ

উত্তর:


3810

jQuery 1.6+

disabledসম্পত্তি পরিবর্তন করতে আপনার .prop()ফাংশনটি ব্যবহার করা উচিত ।

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

jQuery 1.5 এবং নীচে

.prop()ফাংশন বিদ্যমান নয়, কিন্তু .attr()অনুরূপ আছে:

অক্ষম বৈশিষ্ট্য সেট করুন।

$("input").attr('disabled','disabled');

আবার সক্ষম করতে, সঠিক পদ্ধতিটি ব্যবহার করা .removeAttr()

$("input").removeAttr('disabled');

JQuery এর যে কোনও সংস্করণে

আপনি সর্বদা আসল DOM অবজেক্টের উপর নির্ভর করতে পারেন এবং যদি আপনি কেবল একটি উপাদান নিয়ে কাজ করছেন তবে সম্ভবত অন্য দুটি বিকল্পের চেয়ে কিছুটা দ্রুত:

// assuming an event handler thus 'this'
this.disabled = true;

.prop()বা .attr()পদ্ধতিগুলি ব্যবহারের সুবিধা হ'ল আপনি একগুচ্ছ নির্বাচিত আইটেমের জন্য সম্পত্তি সেট করতে পারেন।


দ্রষ্টব্য: 1.6-তে একটি .removeProp()পদ্ধতি রয়েছে যা প্রচুর মত শোনাচ্ছে removeAttr()তবে ডকুমেন্টেশন থেকে উদ্ধৃত অংশের মতো নেটিভ সম্পত্তিগুলিতে এটি ব্যবহার করা উচিত নয়'disabled' :

দ্রষ্টব্য: চেকড, অক্ষম করা বা নির্বাচিত মতো দেশীয় বৈশিষ্ট্য অপসারণ করতে এই পদ্ধতিটি ব্যবহার করবেন না। এটি সম্পত্তি পুরোপুরি সরিয়ে ফেলবে এবং একবার মুছে ফেলা হলে পুনরায় উপাদানটিতে যুক্ত করা যাবে না। পরিবর্তে এই বৈশিষ্ট্যগুলিকে সেট করতে .prop () ব্যবহার করুন।

প্রকৃতপক্ষে, আমি সন্দেহ করি যে এই পদ্ধতির অনেক বৈধ ব্যবহার রয়েছে, বুলিয়ান প্রপসগুলি এমনভাবে করা হয় যে আপনি তাদের "বৈশিষ্ট্য" সহকারীর মতো "মুছে ফেলার" পরিবর্তে তাদের মিথ্যাতে সেট করতে পারেন 1.5


9
একদিকে যেমন মনে রাখবেন, আপনি যদি সমস্ত ফর্ম ইনপুট নিয়ন্ত্রণগুলি অক্ষম করতে চান - তবে। চেকবক্স, রেডিও, টেক্সারিয়াস ইত্যাদি - আপনাকে কেবল নির্বাচন করতে হবে ':input'না 'input'। পরেরটি কেবল আসল <ইনপুট> উপাদান নির্বাচন করে।
কর্নেল ম্যাসন

35
@ কর্নেলম্যাসন এর input,textarea,select,buttonচেয়ে কিছুটা বেশি ব্যবহার করা ভালো :input- :inputএকজন নির্বাচক যেমন যথেষ্ট অক্ষম কারণ এটি *প্রতিটি উপাদানের উপর দিয়ে লুপটি নির্বাচন করতে হয় এবং ট্যাগ-নাম দ্বারা ফিল্টার করতে হয় - আপনি যদি 4 টি ট্যাগের নাম নির্বাচককে সরাসরি পাস করেন তবে এটি খুব দ্রুত। এছাড়াও, :inputকোনও স্ট্যান্ডার্ড সিএসএস নির্বাচক নয়, সুতরাং যে কোনও পারফরম্যান্স লাভগুলি যেগুলি সম্ভব querySelectorAllতা
হ'ল

3
এটি কি কেবল ব্যবহারকারীকে এটি অ্যাক্সেস করা থেকে বিরত রাখে বা এটি ওয়েব অনুরোধ থেকে আসলে তা সরিয়ে দেয়?
ওয়ানচিলডুড

4
.removeProp("disabled")@ থমাস ডেভিডব্যাকার দ্বারা নির্দেশিত হিসাবে ক্রোমের মতো কিছু ব্রাউজারের ক্ষেত্রে ফায়ারফক্সের মতো কিছু ক্ষেত্রে এটি ঠিকঠাকভাবে কাজ করছে বলে "সম্পত্তি সম্পূর্ণরূপে সরিয়ে ফেলা এবং পুনরায় যুক্ত না হওয়া" ইস্যুটি ব্যবহার করা হয়েছিল। আমাদের এখানে সত্যই যত্নবান হওয়া উচিত। সর্বদা .prop("disabled",false)পরিবর্তে ব্যবহার করুন
সন্দীপন নাথ

6
অ্যাঙ্কর উপাদানগুলি অক্ষম করার জন্য .prop বা .attr উভয়ই যথেষ্ট নয়; .প্রপ এমনকি 'নিয়ন্ত্রণ' ধূসর করবে না (.attr না, তবে href এখনও সক্রিয়)। আপনাকে একটি ক্লিক ইভেন্ট হ্যান্ডলার যুক্ত করতে হবে যা প্রতিরোধ ডিফল্ট () কে কল করে।
জেফ লোরি

61

কেবল নতুন কনভেনশনগুলির জন্য এবং & এটিকে সামঞ্জস্য করার যোগ্য করে এগিয়ে চলেছে (যদি না ইসিএমএ 6 এর সাথে বিষয়গুলি খুব দ্রুত বদলে যায় (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

এবং

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

12
Jikes! $(document).on('event_name', '#your_id', function() {...})পরিবর্তে কেন $('#your_id').on('event_name', function() {...})JQuery .on () ডকুমেন্টেশনে বর্ণিত হিসাবে প্রাক্তন প্রতিনিধিদল ব্যবহার করে এবং এমন সমস্ত event_name ইভেন্ট শোনায় যা বুদবুদ হয়ে থাকে documentএবং একটি মিলের জন্য তাদের চেক করে #your_id। পরবর্তীকর্ম কেবল $('#your_id')ইভেন্টগুলিতে বিশেষভাবে শোনায় এবং এটি আরও ভাল স্কেল করে।
পিটার ভি। মার্চ

23
প্রাক্তন যে কোনও সময়ে ডিওমে elementsোকানো উপাদানগুলির জন্য কাজ করে, কেবলমাত্র সেই মুহূর্তে বিদ্যমানদের জন্য।
পাগলমাইক্ল

1
@ ক্রাজাইমাইক্লাল সঠিক তবে আপনার পৃষ্ঠায় ইতিমধ্যে উপস্থিত একটি আইডি সহ উপাদান যুক্ত করা উচিত নয়।
সেপ্টেম্বর

33
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

কখনও কখনও আপনাকে ইনপুট বা টেক্সারিয়ার মতো ফর্ম উপাদানটি অক্ষম / সক্ষম করতে হবে। জ্যাকিউরি আপনাকে "অক্ষম" -এর বৈশিষ্ট্যযুক্ত অক্ষম বৈশিষ্ট্যটি সহজেই এটি তৈরি করতে সহায়তা করে। যেমন:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

অক্ষম উপাদান সক্ষম করতে আপনাকে এই উপাদান থেকে "অক্ষম" বৈশিষ্ট্যটি মুছে ফেলা বা এটির স্ট্রিং খালি করতে হবে। যেমন:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

উল্লেখ করুন: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


13
$("input")[0].disabled = true;

অথবা

$("input")[0].disabled = false;

2
অবশ্যই প্রশ্নটি jQuery এর জন্য জিজ্ঞাসা করেছিল এবং এটি সরল জাভাস্ক্রিপ্টে রাষ্ট্র পরিবর্তন করছে, তবে এটি কার্যকর হয়।
বেসিক 6

1
এটি জাভাস্ক্রিপ্টে রাষ্ট্র পরিবর্তন করে, তবে এটি এখনও প্রথম ইনপুট পেতে jQuery নির্বাচক ব্যবহার করে।
সিজেসিমন

3
তবে আমি মনে করি না যে আমরা এখানে jquery এর এনসাইক্লোপিডিয়া তৈরি করছি, যদি কোনও উত্তর কাজ করে তবে এটি ভাল
সাজ্জাদ শিরাজী

8

আপনি আপনার কোডে এটি কোথাও বিশ্বব্যাপী রাখতে পারেন:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

এবং তারপরে আপনি এ জাতীয় জিনিস লিখতে পারেন:

$(".myInputs").enable();
$("#otherInput").disable();

3
যদিও কার্যকারিতা মোড়কে কুশলী হয়, তাহলে আপনি ব্যবহার করা উচিত নয় আছে propএবং না attr সঙ্গে disabledসম্পত্তি এটি সঠিকভাবে কাজ করার জন্য (উপরে jQuery এর 1.6 বা অভিমানী)।
কোডিং চলে গেছে

1
@TrueBlueAussie কি ব্যবহারের downside হয় হয় attr? আমি কিছু প্রকল্পে উপরের কোডটি ব্যবহার করি এবং যতদূর আমি মনে করি এটি ঠিক কাজ করে
নিকু সুরডু

1
স্পষ্ট ব্যতিক্রমগুলি পর্দার পিছনে বৈশিষ্ট্যযুক্ত নিয়ন্ত্রণগুলি with সর্বাধিক বিখ্যাত এক হ'ল checkedচেকবাক্সগুলির সম্পত্তি। ব্যবহার করা attrএকই ফলাফল দেয় না।
কোডিং চলে গেছে

7

যদি আপনি কেবল বর্তমান অবস্থাটি উল্টাতে চান (টগল বোতামের আচরণের মতো):

$("input").prop('disabled', ! $("input").prop('disabled') );

1
ধন্যবাদ টগল করার জন্য আমার কাছে একই জিনিস রয়েছে; ("ইনপুট")। প্রোপ ('অক্ষম', ফাংশন (i, v) {রিটার্ন! ভি;});
Floww

5

এগুলি ব্যবহার করার অনেকগুলি উপায় রয়েছে আপনি যে কোনও উপাদান সক্ষম / অক্ষম করতে পারবেন :

পদ্ধতির ঘ

$("#txtName").attr("disabled", true);

পদ্ধতির ঘ

$("#txtName").attr("disabled", "disabled");

আপনি যদি jQuery 1.7 বা উচ্চতর সংস্করণ ব্যবহার করে থাকেন তবে অ্যাট্রি () এর পরিবর্তে প্রোপ () ব্যবহার করুন।

$("#txtName").prop("disabled", "disabled");

আপনি যদি কোনও উপাদান সক্ষম করতে চান তবে এটি অক্ষম করতে আপনি যা করেছেন তার বিপরীতে আপনাকেই করতে হবে। তবে jQuery কোনও বৈশিষ্ট্য অপসারণ করার জন্য অন্য উপায় সরবরাহ করে।

পদ্ধতির ঘ

$("#txtName").attr("disabled", false);

পদ্ধতির ঘ

$("#txtName").attr("disabled", "");

পদ্ধতির ঘ

$("#txtName").removeAttr("disabled");

আবার আপনি যদি jQuery 1.7 বা উচ্চতর সংস্করণ ব্যবহার করেন তবে অ্যাটর () এর পরিবর্তে প্রোপ () ব্যবহার করুন। তা হ'ল এইভাবে আপনি jQuery ব্যবহার করে কোনও উপাদান সক্ষম বা অক্ষম করবেন।


2

2018 এর জন্য আপডেট:

এখন jQuery জন্য দরকার নেই এবং এটি একটি হয়েছে দিন হলো document.querySelector বা document.querySelectorAll(একাধিক উপাদানের জন্য) প্রায় হুবহু একই কাজ $, প্লাস অনেক বেশী সুনিদৃষ্ট বেশী হিসাবে getElementById, getElementsByClassName,getElementsByTagName

"ইনপুট-চেকবক্স" শ্রেণির একটি ক্ষেত্র অক্ষম করা হচ্ছে

document.querySelector('.input-checkbox').disabled = true;

বা একাধিক উপাদান

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

1
প্রশ্নটি বিশেষত jQuery সম্পর্কে জিজ্ঞাসা করে ... তবে সমানভাবে আপনার বক্তব্যটি সঠিক এবং জেনে রাখা উচিত যে যখন আরও একাধিক উপাদান থাকবে তখন jQuery এর জন্য ব্যবহার করার প্রয়োজন নেই।
এডিসন

2

আপনি ফর্ম উপাদান অক্ষম করতে বা সক্ষম করতে jQuery ব্যবহার করে গতিশীলভাবে নিয়ন্ত্রণ করতে jQuery প্রোপ () পদ্ধতিটি ব্যবহার করতে পারেন। প্রপ () পদ্ধতির জন্য jQuery 1.6 এবং তার বেশি প্রয়োজন।

উদাহরণ:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

1

অক্ষম করুন:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

সক্ষম করুন:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

1

ইনপুট প্রকারের জন্য সত্য অক্ষম করুন:

নির্দিষ্ট ইনপুট প্রকারের ক্ষেত্রে (উদাহরণস্বরূপ পাঠ্য প্রকারের ইনপুট )

$("input[type=text]").attr('disabled', true);

সব ধরণের ইনপুট ধরণের জন্য

$("input").attr('disabled', true);

1
ধন্যবাদ এটি আমাকে একটি ইনপুট নামের সাথে বিচ্ছিন্ন করতে সহায়তা করেছে। $("input[name=method]").prop('disabled', true);
হ্যারি বোশ

1

এটা আমার জন্য কাজ করে

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

0

আমি @gnarf উত্তর ব্যবহার করেছি এবং এটি ফাংশন হিসাবে যুক্ত করেছি

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

তারপরে এভাবে ব্যবহার করুন

$('#myElement').disable(true);

0

2018, জিকুয়ারি ছাড়াই (ইএস 6)

সমস্ত অক্ষম করুন input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

অক্ষম inputসঙ্গেid="my-input"

document.getElementById('my-input').disabled = true;

প্রশ্ন হল সঙ্গে , jQuery এটা শুধু অবগতির জন্য আছে।




-1
<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

1
পর্যালোচনা সারি থেকে : আমি আপনাকে অনুরোধ করতে দয়া করে আপনার উত্তর কাছাকাছি আরও কিছু প্রসঙ্গ যুক্ত করুন। কোড-কেবল উত্তরগুলি বোঝা মুশকিল। আপনি যদি আপনার পোস্টে আরও তথ্য যুক্ত করতে পারেন তবে এটি প্রশ্নকারী এবং ভবিষ্যতের পাঠকদের উভয়কেই সহায়তা করবে।
আরবিটি

-1

JQuery মোবাইলে:

অক্ষম করার জন্য

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

সক্ষম করার জন্য

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.