একটি ওয়েব অ্যাপ্লিকেশনে বাটন ডিজেবল করার অনেক কারণ থাকতে পারে। যেটি একটি ইউজারকে সোল্ড আউট আইটেম তাদের শপিং কার্টে যোগ করতে দেয় না, অথবা একটি অ্যাকশন পারফর্ম হওয়ার পর ইউজাকে বাটনে ক্লিক করতে দেয় না, jQuery-র বাটন ডিজেবল করার জন্য কোনো ডাইরেক্ট মেথড নেই।
বদলে, আমরা prop() মেথড ব্যবহার করি, যা লাইব্রেরিতে একটি নতুন সংযোজন - jQuery 1.6-এ আপিয়ার করেছিল। এটি সিলেক্ট করা এলিমেন্টগুলোর প্রপার্টি ভ্যালু রিট্রিভ করার সমাধান হিসেবে ইন্ট্রোডিউস করা হয়েছিল। পূর্বে, এটি attr() মেথড দিয়ে করা হতো, যা অ্যাট্রিবিউট ভ্যালু রিট্রিভ করে।
একটি মেথড অ্যাট্রিবিউট ভ্যালু পাওয়ার চিন্তা করার সাথে সাথে প্রপার্টি ভ্যালুও রিট্রিভ করলে অনপ্রিডিক্টেবল ফলাফল দেয় কখনও কখনও। jQuery 1.6 থেকে, prop() মেথড এই ডিসপ্যারিটি সমাধান করার জন্য ইন্ট্রোডিউস করা হয়েছিল। আমাদের উদ্দেশ্যের জন্য, আমরা prop() ব্যবহার করব আমাদের বাটন ডিজেবল করার জন্য কারণ "disabled" একটি HTML বাটন এলিমেন্টের একটি প্রপার্টি ভ্যালু।
আপনি যদি attr() বনাম prop() সম্পর্কে আরও জানতে চান, তবে সংক্ষিপ্ত ইতিহাস এবং টিউটোরিয়াল পড়ুন।
prop() jQuery সিনট্যাক্স
এখন যেহেতু আমরা কেন এবং কীভাবে prop() ব্যবহার করব সেটি টাচ করেছি, আমরা সিনট্যাক্সে এক নজর দিতে পারি। মনে রাখবেন যে prop() শুধু আরেকটি jQuery মেথড এবং এই মেথডগুলো একটি সিলেক্ট করা এলিমেন্টে কল করা হয় - আমাদের কেসে, একটি বাটন। চলুন দেখি কীভাবে আমরা "btn" আইডি वाले একটি বাটন ডিজেবল করব।
<button id='btn' type='submit'> Button is Disabled </button>
এই HTML বাটনটি রেন্ডার করে।
আমাদের বাটন রেন্ডার হচ্ছে! এখন আমরা jQuery prop() ব্যবহার করে "disabled" প্রপার্টি ভ্যালুকে true সেট করতে পারি।
$('#btn').prop('disabled', true)
আমরা দেখতে পাচ্ছি, prop() ভ্যালুটি স্ট্রিং হিসেবে গ্রহণ করে এবং আমরা বুলিয়ান ভ্যালুটি দ্বিতীয় আর্গুমেন্টে সেট করি। বুলিয়ান ভ্যালুগুলো হয় true বা false। বুলিয়ান কীভাবে ব্যবহার করতে হয় সে সম্পর্কে ডিপার গাইড পড়ুন।
"disabled" প্রপার্টি true সেট করার পর, আমরা একটি আনক্লিকেবল বাটন রেন্ডার করি। এখন যেহেতু আমরা সিনট্যাক্স বুঝতে পেরেছি, চলুন দেখি কেন এবং কখন আমরা এটি ব্যবহার করতে চাব। পরবর্তী সেকশনে, আমরা একটি ই-কমার্স সাইট দেখব যেখানে প্রোডাক্টগুলোর "sold-out?" নামে একটি অ্যাট্রিবিউট আছে।
jQuery prop() ব্যবহার করে একটি বাটন ডিজেবল করা
এই উদাহরণে, আমাদের একটি শপিং অ্যাপ আছে যা "Add to Cart" বাটনটি ডিজেবল করবে যদি প্রোডাক্টটি সোল্ড আউট হয়। এই উদাহরণের জন্য, আমরা একটি সিম্পল HTML বাটন রেন্ডার করব, এবং একটি <div> আইটেম যোগ করার জন্য যদি এটি সোল্ড আউট না হয়।
<button class='add' type='submit'> Add to Cart </button> <div> </div>
চলুন দেখি আমাদের বাটন কীভাবে রেন্ডার হয়।
এখন, চলুন একটি প্রোডাক্ট এবং একটি কলব্যাক ফাংশন - একটি ফাংশন যা অন্য ফাংশনে পাস করা হয় পরে কল করা হয় - তৈরি করি আমাদের কার্ট <div>-এ ডিসপ্লে করার জন্য। যদি প্রোডাক্টটি সোল্ড আউট হয়, বাটনটি ডিজেবল হবে।
const product = { name: 'Jacket', price: 50.00, soldOut: false } $(document).ready(function() { $('button.add').click(function(event) { event.preventDefault() alert(JSON.stringify(product.soldOut)) if (product.soldOut) { $('.add').prop('disabled', true) } else { $('div').append(product.name) } }) })
আমরা product নামে একটি ভেরিয়েবল তৈরি করেছি যেটি একটি অবজেক্ট ধারণ করে। অবজেক্টটিতে name, price, এবং soldOut নামে প্রপার্টি আছে। যদি soldOut প্রপার্টি false হয়, তবে আমাদের জ্যাকেট আমাদের <div>-এ ডিসপ্লে হবে। চলুন Add to Cart-এ ক্লিক করি এবং দেখি কী হয়।
যেহেতু আমাদের soldOut প্রপার্টি false সেট করা আছে, আমরা আমাদের প্রোডাক্ট <div>-এ ডিসপ্লে করেছি। কী হয় যদি সেটি স্টকে লাস্ট জ্যাকেট হয়? চলুন দেখি soldOut প্রপার্টি true সেট করলে কী হয়।
const product = { name: 'Jacket', price: 50.00, soldOut: true }
আমরা আশা করি Add to Cart বাটনটি এখন ডিজেবল হবে।
ঠিক যা আমরা চেয়েছিলাম। কলব্যাক ফাংশনে কন্ডিশনাল স্টেটমেন্ট ব্যবহার করে, আমরা Add to Cart বাটনটি ডিজেবল করতে পেরেছি। এখন ইউজাররা সোল্ড আউট আইটেম তাদের কার্টে যোগ করতে পারবেন না। আমরা আমাদের ই-কমার্স অ্যাপে একটি বড় হেডএক এড়িয়ে গেলাম!
উপসংহার
jQuery-এ HTML বাটন ডিজেবল করা শিখতে শিখতে, আমরা আবিষ্কার করেছি যে jQuery-র এর কাজের জন্য কোনো এক্সপ্লিসিট মেথড নেই। এর ওয়ার্কঅরাউন্ড হিসেবে, আমরা prop() মেথড ব্যবহার করেছি বাটন প্রপার্টি "disabled"-কে true সেট করার জন্য। তারপর আমরা একটি উদাহরণ দেখেছি কীভাবে একটি বাটন ডিজেবল করা উপকারী।
ওয়েব ডেভেলপমেন্টে ইউজার এক্সপেরিয়েন্স গাইড করা অপরিহার্য। এই গাইডে, আমরা বাটন ডিজেবল করে ইউজার এক্সপেরিয়েন্স গাইড করেছি। এক্সপ্লোর করুন আপনার নেক্সট প্রজেক্টে বাটন ডিজেবল করা কীভাবে আপনার ইউজার এক্সপেরিয়েন্স ডাইরেক্ট করতে সাহায্য করতে পারে।
