একটি ওয়েব অ্যাপ্লিকেশনে একটি বোতাম নিষ্ক্রিয় করার অনেক কারণ আছে। এটি কোনও ব্যবহারকারীকে তাদের শপিং কার্টে বিক্রি হওয়া আইটেম যুক্ত করা থেকে আটকাতে বা কোনও ক্রিয়া সম্পাদন করার পরে ব্যবহারকারীকে কোনও বোতামে ক্লিক করার অনুমতি না দেওয়ার জন্যই হোক না কেন, jQuery-এর কাছে সরাসরি বোতামগুলি অক্ষম করার কোনও পদ্ধতি নেই।
পরিবর্তে, আমরা prop() ব্যবহার করি পদ্ধতি, লাইব্রেরিতে একটি নতুন সংযোজন — jQuery 1.6-এ উপস্থিত। এটি নির্বাচিত উপাদানগুলির সম্পত্তি মান পুনরুদ্ধার করার একটি সমাধান হিসাবে চালু করা হয়েছিল। পূর্বে, এটি attr() দিয়ে করা হত পদ্ধতি, যা বৈশিষ্ট্যের মান পুনরুদ্ধার করে।
বৈশিষ্ট্যের মানগুলি পাওয়ার সাথে সম্পর্কিত একটি পদ্ধতি থাকা এবং সম্পত্তির মানগুলি পুনরুদ্ধার করার সময় সময়ে অপ্রত্যাশিত ফলাফল পাওয়া যায়। jQuery 1.6 অনুযায়ী, prop() এই বৈষম্য সমাধানের জন্য পদ্ধতি চালু করা হয়েছিল। আমাদের উদ্দেশ্যের জন্য, আমরা prop() ব্যবহার করব আমাদের বোতামগুলি নিষ্ক্রিয় করতে কারণ "অক্ষম" হল একটি HTML বোতাম উপাদানের একটি সম্পত্তি মান।
আপনি যদি att() ব্যবহার করার বিষয়ে আরও জানতে চান বনাম prop() , সংক্ষিপ্ত ইতিহাস এবং টিউটোরিয়াল পড়ুন।
prop() jQuery সিনট্যাক্স
এখন আমরা কেন এবং কিভাবে prop() ব্যবহার করতে হয় তা স্পর্শ করেছি , আমরা সিনট্যাক্স কটাক্ষপাত করতে পারেন. মনে রাখবেন যে prop() শুধুমাত্র আরেকটি jQuery পদ্ধতি এবং এই পদ্ধতিগুলিকে একটি নির্বাচিত উপাদানে কল করা হয় - আমাদের ক্ষেত্রে, একটি বোতাম। আসুন দেখি কিভাবে আমরা "btn" আইডি সহ একটি বোতাম নিষ্ক্রিয় করতে পারি।
<button id='btn' type='submit'> Button is Disabled </button>
এই HTML বোতামটি রেন্ডার করে।
আমাদের বোতাম রেন্ডারিং হয়! এখন আমরা jQuery prop() ব্যবহার করে "অক্ষম" এর সম্পত্তি মান সত্যে সেট করতে পারি .
$('#btn').prop('disabled', true)
আমরা দেখতে পাচ্ছি, prop() মানটিকে একটি স্ট্রিং হিসাবে গ্রহণ করে এবং আমরা দ্বিতীয় আর্গুমেন্টে বুলিয়ান মান সেট করি। বুলিয়ান মান হয় সত্য বা মিথ্যা। এখানে একটি গাইড রয়েছে যা বুলিয়ান কীভাবে ব্যবহার করতে হয় তার গভীরে যায়।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
"অক্ষম" সম্পত্তি সত্যে সেট করার পরে, আমরা একটি আনক্লিকযোগ্য বোতাম রেন্ডার করি। এখন যেহেতু আমরা সিনট্যাক্স বুঝতে পেরেছি, আসুন কেন এবং কখন আমরা এটি ব্যবহার করতে চাই তা একবার দেখে নেওয়া যাক। পরবর্তী বিভাগে, আমরা একটি ই-কমার্স সাইট দেখব যেখানে পণ্যের বৈশিষ্ট্য রয়েছে "বিক্রীত-আউট?"।
একটি বোতাম নিষ্ক্রিয় করতে jQuery প্রপ() ব্যবহার করা
এই উদাহরণে, আমাদের কাছে একটি শপিং অ্যাপ রয়েছে যা পণ্যটি বিক্রি হয়ে গেলে "কার্টে যোগ করুন" বোতামটি অক্ষম করবে। এই উদাহরণের জন্য, আমরা একটি সাধারণ HTML বোতাম রেন্ডার করব, এবং একটি
<button class='add' type='submit'> Add to Cart </button> <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)
}
})
}) আমরা পণ্য নামক একটি ভেরিয়েবল তৈরি করেছি যাতে একটি বস্তু রয়েছে। বস্তুটির নাম, মূল্য এবং বিক্রির বৈশিষ্ট্য রয়েছে। যদি সম্পত্তি বিক্রি করা মিথ্যা হয়, তাহলে আমাদের জ্যাকেটটি আমাদের
যেহেতু আমাদের বিক্রিত সম্পত্তি মিথ্যা সেট করা হয়েছে, আমরা আমাদের পণ্যটি
const product = {
name: 'Jacket',
price: 50.00,
soldOut: true
}
আমরা আশা করি কার্টে যোগ করুন বোতামটি এখন নিষ্ক্রিয় হয়ে যাবে।
আমরা ঠিক এটাই চেয়েছিলাম। কলব্যাক ফাংশনে কন্ডিশনাল স্টেটমেন্ট ব্যবহার করে, আমরা অ্যাড টু কার্ট বোতামটি নিষ্ক্রিয় করতে সক্ষম হয়েছি। এখন ব্যবহারকারীরা তাদের কার্টে বিক্রি হওয়া আইটেম যোগ করতে পারবেন না। আমরা আমাদের ই-কমার্স অ্যাপে একটি বড় মাথাব্যথা এড়াতে পেরেছি!
উপসংহার
কিভাবে jQuery এর সাথে একটি HTML বোতাম নিষ্ক্রিয় করতে হয় তা শিখতে, আমরা আবিষ্কার করেছি যে jQuery এর এটি করার জন্য একটি সুস্পষ্ট পদ্ধতি নেই। এটিকে ঘিরে কাজ করার জন্য, আমরা prop() ব্যবহার করেছি বোতাম বৈশিষ্ট্য "অক্ষম" সত্যে সেট করার পদ্ধতি। তারপর আমরা একটি বোতাম নিষ্ক্রিয় কিভাবে দরকারী একটি উদাহরণ দেখেছি.
ওয়েব ডেভেলপমেন্টে ব্যবহারকারীর অভিজ্ঞতাকে গাইড করা অপরিহার্য। এই নির্দেশিকায়, আমরা ব্যবহারকারীর অভিজ্ঞতা নির্দেশ করতে অক্ষম করার বোতাম ব্যবহার করেছি। কীভাবে একটি বোতাম নিষ্ক্রিয় করা আপনার পরবর্তী প্রকল্পে আপনার ব্যবহারকারীর অভিজ্ঞতাকে নির্দেশ করতে সাহায্য করতে পারে তা অন্বেষণ করুন৷
৷