বোতাম
বোতামগুলি অক্ষম করা সহজ disabledকারণ ব্রাউজার দ্বারা পরিচালিত একটি বোতামের সম্পত্তি:
<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>
একটি কাস্টম jQuery ফাংশন এগুলি অক্ষম করতে, আপনি কেবল এর ব্যবহার করতে চাই fn.extend():
// Disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
this.disabled = state;
});
}
});
// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);
// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);
জেএসফিডাল অক্ষম বোতাম এবং ইনপুট ডেমো ।
অন্যথায় আপনি jQuery এর prop()পদ্ধতিটি ব্যবহার করবেন :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
অ্যাঙ্কর ট্যাগস
এটি বৈধ সম্পত্তি নয়disabled তা লক্ষ করার মতো অ্যাঙ্কর ট্যাগগুলির জন্য । এই কারণে, বুটস্ট্র্যাপ তার .btnউপাদানগুলিতে নিম্নলিখিত স্টাইলিংটি ব্যবহার করে :
.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #333;
background-color: #E6E6E6;
}
[disabled]পাশাপাশি সম্পত্তি কীভাবে লক্ষ্যবস্তু করা হয়েছে তা নোট করুন.disabled বর্গ। .disabledবর্গ কি একটি নোঙ্গর ট্যাগ অক্ষম প্রদর্শিত করতে প্রয়োজন হয়।
<a href="http://example.com" class="btn">My Link</a>
অবশ্যই এটি ক্লিক করার সময় লিঙ্কগুলি কাজ করা থেকে বিরত রাখবে না। উপরের লিঙ্কটি আমাদের http://example.com এ নিয়ে যাবে । এটি প্রতিরোধ করতে, আমরা disabledকল করার জন্য ক্লাসের সাথে অ্যাঙ্কর ট্যাগগুলিকে লক্ষ্য করতে jQuery কোডের একটি সহজ টুকরো যুক্ত করতে পারি event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
আমরা disabledক্লাসটি ব্যবহার করে টগল করতে পারি toggleClass():
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
$this.toggleClass('disabled', state);
});
}
});
// Disabled with:
$('a').disable(true);
// Enabled with:
$('a').disable(false);
জেএসফিডাল লিংক ডেমো অক্ষম করেছে ।
মিলিত
এরপরে আমরা ব্যবহার করতে অক্ষম করার চেষ্টা করছি এমন উপাদানগুলির পরীক্ষা করতে উপরে তৈরি করা পূর্ববর্তী অক্ষম ফাংশনটি বাড়িয়ে দিতে পারি is()। এটি toggleClass()যদি আমরা কোনও উপাদান inputবা buttonউপাদান না হয় বা disabledসম্পত্তিটি টগল করি তবে আমরা এইভাবে পারি :
// Extended disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
if($this.is('input, button, textarea, select'))
this.disabled = state;
else
$this.toggleClass('disabled', state);
});
}
});
// Disabled on all:
$('input, button, a').disable(true);
// Enabled on all:
$('input, button, a').disable(false);
সম্পূর্ণ সম্মিলিত জেএসফিডাল ডেমো ।
এটি আরও লক্ষণীয় যে উপরের ফাংশনটি সমস্ত ইনপুট ধরণের ক্ষেত্রেও কাজ করবে।
