এইচটিএমএল চেকবাক্সগুলি কেবল পাঠযোগ্যভাবে সেট করা যেতে পারে?

817

আমি ভেবেছিলাম তারা হতে পারে, তবে আমি যেখানে আমার মুখ ছিল সেখানে আমার অর্থ রাখছি না (তাই বলতে বলতে) পাঠ্যলিপি বৈশিষ্ট্যটি সেট করা আসলে কিছুই করার মতো মনে হয় না।

আমি বরং অক্ষমদের ব্যবহার করব না, যেহেতু আমি চাইছি যে চেক করা বাক্সগুলি বাকী ফর্মের সাথে জমা দেওয়া হোক, আমি কেবল ক্লায়েন্টকে নির্দিষ্ট পরিস্থিতিতে তাদের পরিবর্তন করতে সক্ষম হতে চাই না।

html  checkbox 
— Electrons_Ahoy
সূত্র
39
একটি (দূষিত) ক্লায়েন্ট সর্বদা একটি চেকবক্সের মান পরিবর্তন করতে পারে (বা যথেচ্ছ অনুরোধগুলি প্রেরণ করতে পারে)। সর্বদা নিশ্চিত হয়ে নিন যে আপনি যথাযথ সার্ভার-সাইড বৈধকরণ করেছেন!
— নিটল
4
@knittl তবে একটি সাধারণ ভাইস্টারের কোনও (দূষিত) ক্লায়েন্ট নেই। এবং একটি সাধারণ ভিস্টর কোনও তথ্য পরিবর্তন করতে চায়নি (এটিই readonly
— সংবেদন
3
@ Knittl আপনি পুরো ধারণাটি বর্জন করবেন বলে মনে হচ্ছে readonly! তাহলে কেন এই বৈশিষ্ট্যটির অস্তিত্ব থাকবে!
— ইজহার আজমি
10
@ ইজহারআজমি: readonlyব্রাউজারকে কোনও সাইটকে যথাযথভাবে রেন্ডার করতে এবং তারপরে এটি থেকে সঠিক অনুরোধটি তৈরি করতে সহায়তা করার জন্য কেবল ক্লায়েন্ট-সাইড অ্যাট্রিবিউট। সার্ভারটি readonlyরেন্ডার করা পৃষ্ঠার বৈশিষ্ট্য সম্পর্কে জানতে ও জানতে পারে না । এটি অবশ্যই অনুরোধ করা হয়েছে যে কোনও জায়গা থেকে অনুরোধ এসেছে (এবং সম্ভবত দূষিত উদ্দেশ্য সহ); ব্যবহারকারীর সরবরাহিত ইনপুটটির উপর কখনই নির্ভর করবেন না। তবুও, একটি চেকবক্সের মান কেন আপনি অনুরোধে সম্পাদনা করতে পারবেন না (যদি আপনি রেন্ডারিংয়ের আগে মানটি সেট করেন, অনুরোধটি জমা দেওয়ার আগে আপনি ইতিমধ্যে মানটি জানেন, তাই অনুরোধে এটি প্রেরণ করার দরকার নেই)
— নিটল
4
@ Knittl আমি সম্মত! তবে আপনি দেখতে পান readonlyযে কোনও কারণে এখানে অ্যাট্রিবিউট উপস্থিত রয়েছে। এটির সার্ভার সাইড প্রয়োগের সাথে অবশ্যই কোনও সম্পর্ক নেই। তবে সেখানে ব্যবহারকারীকে বলতে হবে "আরে! এখানে এই মানটি ধরে নেওয়া হচ্ছে, এবং / তবে আপনি এটি পরিবর্তন করতে পারবেন না।"
— ইজহার আযমী

উত্তর:

538

আপনি এটি ব্যবহার করতে পারেন:

<input type="checkbox" onclick="return false;"/>

এটি কাজ করে কারণ ক্লিক ইভেন্ট থেকে মিথ্যা প্রত্যাবর্তন মৃত্যুদন্ডের ধারাবাহিকতা বন্ধ করে দেয়।

— ইয়ান্নি
সূত্র
29
জাভাস্ক্রিপ্টে মিথ্যা প্রত্যাবর্তন ক্লিক বা কী হ্যান্ডলারের জন্য কার্যকর করার শৃঙ্খলা অব্যাহত রাখে। চেকবাক্সের রাজ্যের সাথে কোনও সম্পর্ক নেই
— জেসিকা ব্রাউন
9
পিএস ... আপনি যদি চেকবক্সটি চেক করা অবস্থায় থাকতে চান তবে আপনাকে checked="checked"জাভাস্ক্রিপ্টের সাথে গোলযোগ না করে যুক্ত করা দরকার । জাভাস্ক্রিপ্টটি কেবল ইনপুট অবজেক্টে মাউস ক্লিকগুলিকে উপেক্ষা করতে বাধ্য করা হয়েছে, চেকবক্সের স্থিতি স্থাপন করতে নয়।
— জেসিকা ব্রাউন
8
এক্ষেত্রে আর / ও স্থিতির কোনও ভিজ্যুয়াল ইঙ্গিত নেই।
— জেসি গ্লিক
11
যদিও পরবর্তী ইনপুটটিতে নেভিগেট করতে TAB ব্যবহার করা থেকে বিরত রাখে।
— ব্যবহারকারী 327961
7
জাভাস্ক্রিপ্ট অক্ষম থাকলে সম্পূর্ণ ব্যর্থ হয়!
— দোনে
419

READONLYযেমন একটি ক্ষেত্র এর সম্পাদনা থেকে বাধা দেয় চেকবাক্সগুলি না কাজ করে মান , কিন্তু একটি চেকবক্স সঙ্গে আপনি আসলে ক্ষেত্রের সম্পাদনা করছেন রাষ্ট্র (|| বন্ধ দিকে)

FAQs.org থেকে :

এটি বুঝতে গুরুত্বপূর্ণ যে কেবলমাত্র ক্ষেত্রের সাথে আলাপচারিতা না করে ব্যবহারকারীকে কেবলমাত্র ক্ষেত্রের মান পরিবর্তন করতে বাধা দেয়। উদাহরণস্বরূপ, চেকবাক্সগুলিতে আপনি সেগুলি চালু বা বন্ধ করে পরীক্ষা করতে পারেন (এভাবে চেক করা রাষ্ট্র নির্ধারণ করা) তবে আপনি ক্ষেত্রের মান পরিবর্তন করবেন না।

আপনি যদি ব্যবহার করতে না চান disabledতবে তবুও মানটি জমা দিতে চান তবে কীভাবে কোনও লুকানো ক্ষেত্র হিসাবে মানটি জমা দেওয়া এবং যখন তারা সম্পাদনার মানদণ্ড পূরণ না করে কেবল তখন তার বিষয়বস্তু মুদ্রণ করবেন? যেমন

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}
— কনরোয়পি
সূত্র
135
কাজ করে, তবে এটি একধরনের .. খুব নোংরা, চেকবক্সগুলিতে কেবলমাত্র স্বজ্ঞাত যা বলে তা করা উচিত।
— লেভিটা
8
অন্তর্দৃষ্টি আমাদের বোকা করে, যেমন কনরোয়পি ব্যাখ্যা করেছে।
— এভিনিস
120
অন্তর্দৃষ্টি মার্কিন বোকা না, যারা এইভাবে চেকবক্স প্রয়োগ করেছে তাদের বোকা বানিয়েছে।
— ক্যালিফ
@ কনরোয়পি -> "এটি আপনাকে কোনও ক্ষেত্রের মান সম্পাদনা করতে বাধা দেয় তবে একটি চেকবক্সের সাহায্যে আপনি ক্ষেত্রের স্থিতিটি সম্পাদনা করছেন (|| বন্ধ)"। হাড় মাথায় নিয়ে যাওয়া সিদ্ধান্তের জন্য এটি সত্যই দুর্বল সমর্থনযোগ্যতা। 'রাষ্ট্র' এবং 'মান' আমাদের বেশিরভাগের কাছে অনেকটাই 'টোমায়ো' এবং 'টো এমএএচটিও' এর মতো, আপনি দেখতে পাচ্ছেন না যে লোকেরা দ্বিমত পোষণ করে।
— ম্যাকএলি
343

এটি একটি চেকবক্স যা আপনি পরিবর্তন করতে পারবেন না: 

<input type="checkbox" disabled="disabled" checked="checked">

কেবল disabled="disabled"একটি গুণ হিসাবে যুক্ত করুন ।


মন্তব্যগুলি সম্বোধন করতে সম্পাদনা করুন:

আপনি যদি কোনও সহজে সমাধানের চেয়ে কোনও লুকানো ইনপুটটিতে একই নামটি প্রয়োগ করতে চান তবে ডেটা আবার পোস্ট করাতে চান:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

এইভাবে, যখন চেকবাক্সটি 'অক্ষম' হিসাবে সেট করা থাকে, তখন এটি কেবলমাত্র ডেটাটির সাথে 'লিঙ্ক' হওয়ার পরিবর্তে কেবলমাত্র উপাত্তের উপস্থাপনের উদ্দেশ্যে কাজ করে। ফিরে পোস্টে, চেকবক্সটি অক্ষম করা থাকলে লুকানো ইনপুটটির মান প্রেরণ করা হচ্ছে।

— সিলভারমাইন্ড
সূত্র
331
নোট করুন যে "অক্ষম" চেকবক্সটি POST ডেটার মাধ্যমে মান প্রেরণ করে না।
— বিফোবি
66
@ পোয়াটাক আপনি সম্বোধন করতে ব্যর্থ হন যে তিনি পোস্ট করা ডেটা চান, আপনার উদাহরণ এটি করে না।
— ডেভিড মর্টেনসন
70
এই উত্তরের 105 টি উপাখ্যান হওয়ার কোনও উপায় নেই। এটি ওপি রাষ্ট্রের সমস্ত কিছুর বিরুদ্ধে যায়।
— জেএম 4
15
@ নাথানহাইফিল্ড: এই যুক্তি অনুসারে আমার যে কোনও বিষয় সম্পর্কে সহায়ক জবাব পোস্ট করতে হবে এবং উজ্জীবিত হওয়া উচিত। :(
— মাইকেল ব্রে
24
@ মিশেলব্রে আমি অনুমান করছি যে এটি প্রচুর পরিমাণে উত্সাহ পাবে কারণ প্রচুর লোকেরা চেকবক্সগুলি কীভাবে সহজেই তৈরি করতে হয় তা জানতে চায় তাই তারা এটি করে: 1) গুগল "চেকবক্স কেবল পঠনযোগ্য"। 2) দেখুন যে এই প্রশ্নের শিরোনামটি তারা কী করতে চায় এবং এটিতে ক্লিক করতে চায় তার সাথে মেলে। 3) তারা এই উত্তরটি না পাওয়া পর্যন্ত নীচে স্ক্রোল করুন। 4) সুখ এবং upvote।
— বায়ার্স চিহ্নিত করুন
63 
<input type="checkbox" onclick="this.checked=!this.checked;">

তবে সার্ভারের ডেটা পরিবর্তন করা হয়নি তা নিশ্চিত করার জন্য আপনার অবশ্যই একেবারে বৈধতা দেওয়া উচিত।

— গ্রান্ট ওয়াগনার
সূত্র
4
আমি এটি সেরা সমাধান বলে মনে করেছি; তদ্ব্যতীত, আমি একটি দুর্দান্ত সামান্য চিহ্ন দেখানোর জন্য কোডের অন্য টুকরোকে (বলুন, কিছু জকিউইফুল স্টাফ) কল করতে পারি যা বলে যে "আপনি প্রথম x না করা পর্যন্ত আপনি এটি পরিবর্তন করতে পারবেন না"। সুতরাং এর মতো কিছু: "... onclick = 'this.checked =! This.checked; জাভাস্ক্রিপ্ট: দ্য চেকবক্সওয়াস ক্লিক ();' ..."
— বেন
এটি পাউটাটকের উত্তর হিসাবে বাক্সগুলি ধূসর করে দেয় না যাতে এটি আমার ভোট পেয়ে যায়
— EHarpham
এটি সামান্য হ্যাকিশ, তবে এটি একটি বুদ্ধিমান, নিখুঁত, প্রায় মার্জিত সামান্য হ্যাক।
— রাসেল
সবচেয়ে ভালো সমাধান. সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত।
— স্কটি
3
উপরে উল্লিখিত হিসাবে, এটি আই-তে ডাবল ক্লিক করে কাজ করে না। আমি ব্যবহার করেছি: অনচেঞ্জ = "this.checked = সত্য;"
— itতিকেশ
57

অন্য একটি "সহজ সমাধান":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

অক্ষম = "অক্ষম" / অক্ষম = সত্য

— সমষ্টি m
সূত্র
1
এটি সমস্ত সমস্যার সমাধান করে: কেবলমাত্র পঠনযোগ্য চেকবাক্স তৈরি করে, পোস্টের তথ্য জমা দেয় এবং কেবলমাত্র পঠনযোগ্য নেসের ভিজ্যুয়াল ইঙ্গিত দেয় (সমস্ত জাভাস্ক্রিপ্ট সমাধানের বিপরীতে)
— ডালিবোর ফ্রাইভাল্ডস্কি
2
আপনি নিজের ডামি-বাক্স থেকেও বাদ দিতে পারেন nameএবং valueবৈশিষ্ট্যগুলিও ছেড়ে দিতে পারেন ="checked"এবং ="diabled"গুণাবলীও বাদ দিতে পারেন। w3.org/TR/html-markup/input.checkbox.html
— সাম্পো সরলা - codidact.org
সর্বাধিক গুরুত্বপূর্ণ এই সমাধানটি পুরানো এইচটিএমএল এবং জাভাস্ক্রিপ্টের উপর নির্ভর করে না।
— GlennG
45

এটি কিছুটা ব্যবহারযোগ্যতার সমস্যা উপস্থাপন করে।

আপনি যদি একটি চেকবক্স প্রদর্শন করতে চান, তবে এটির সাথে ইন্টারঅ্যাক্ট না হতে দিন, এমনকি চেকবাক্স কেন?

তবে, আমার পদ্ধতির অক্ষম ব্যবহার করা হবে (ব্যবহারকারী প্রত্যাশা করেছেন যে কোনও অক্ষম চেকবক্সটি সম্পাদনযোগ্য না হবে, পরিবর্তে জেএস ব্যবহারের পরিবর্তে কোনও সক্ষমকে কাজ না করে) এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি ফর্ম জমা হ্যান্ডলার যুক্ত করুন যা ফর্মটি আসার আগে চেকবক্সগুলিকে সক্ষম করে using জমা দেওয়া হয়েছে। আপনি নিজের মান পোস্ট করতে পারেন এইভাবে।

অর্থাত্ এর মতো কিছু:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}
— রিভিউ ফ্লাইওয়াত
সূত্র
22
অন্য বিকল্পটি হ'ল অক্ষম চেকবক্সটি প্রদর্শন করা (বা কোনও চিত্র বা চেক / চেক করা না বোঝাতে কিছু) এবং একটি গোপন ইনপুট থাকে যা সার্ভার দ্বারা প্রক্রিয়াজাত করা হয়।
— হুয়ান মেন্ডিস 15
5
আপনি যখন এমন একটি ফর্ম পেয়েছেন তখন এটি কোনও ব্যবহারযোগ্যতার সমস্যা নয় যা আপনার সিদ্ধান্তের কিছুটা অন্য কিছু ইনপুটগুলিকে প্রভাবিত করে (ওরফে: এমন মান নির্ধারণ করে যা আপনি যদি প্রথম পদক্ষেপটি পূর্বাবস্থায় ফেরান না তবে স্পর্শ করা যায় না)) লোকেরা জবাব দেওয়ার পরিবর্তে লোকের মন পরিবর্তন করার চেষ্টা করলে আমি ঘৃণা করি (এটি আপনার @ ফ্লাইওয়াত সম্পর্কে নয়, আপনি উত্তর দিয়েছেন)।
— ফেরিমাসন 14
7
উদ্দেশ্যটি হ'ল "এই মানটি সত্য" হিসাবে প্রদর্শন ক্ষেত্র হিসাবে একটি চেকবক্স ব্যবহার করা, যা "সত্য" / "মিথ্যা"-গুলিগুলির গুচ্ছের চেয়ে কোনও টেবিল স্ক্যান করা সহজ। অবশ্যই, আপনি একটি আইকন ব্যবহার করতে পারেন তবে, একটি ফর্মের মধ্যে, চেকবক্সগুলি সেখানে ব্যবহার করার জন্য উপযুক্ত বলে মনে হচ্ছে।
— অলি
1
আমি সাধারণত এই সমাধানটি ব্যবহার করি তবে .. কখনও কখনও ব্যবহারকারীরা, বিশেষত ধীর সংযোগে, ফর্ম জমা দেওয়ার পরে ইনপুট বোতাম সক্ষম হয় এবং এটি দিয়ে খেলতে সিদ্ধান্ত নেয়।
— সিস্টেম
2
মনে করুন আপনার কাছে এমন একটি "বৈশিষ্ট্য" রয়েছে যা অন্তর্ভুক্ত করা যায় বা নাও পারে, তাই আপনার কাছে একটি টেমপ্লেট রয়েছে যা বৈশিষ্ট্যটিতে একটি চেক বাক্স দেখায়। তবে কখনও কখনও, কোনও বৈশিষ্ট্য অন্য কোনও কিছুর জন্য পূর্বশর্ত ... সুতরাং এটি অবশ্যই অন্তর্ভুক্ত করা উচিত তবে আপনি নিজের টেম্পলেটটি পরিবর্তন করতে চান না। অক্ষম / চেক করা চেকবক্সটি ঠিক এটির জন্য। তারা চিরকাল থেকে গেছে, তাই আমি আশা করি "কেন এমনকি একটি চেকবাক্স" প্রশ্নটি বাকবিতণ্ডার ছিল।
— ত্রিয়ঙ্কো
38 
<input type="checkbox" readonly="readonly" name="..." />

jquery সহ:

$(':checkbox[readonly]').click(function(){
            return false;
        });

এটি এখনও কিছু ভিজ্যুয়াল হিন্ট (সিএসএস, পাঠ্য, ...) দেওয়ার জন্য একটি ভাল ধারণা হতে পারে যে নিয়ন্ত্রণটি ইনপুট গ্রহণ করবে না।

— জানুয়ারী
সূত্র
এটি আমার জন্য ie6 এ কাজ করে নি, কেবল পাঠযোগ্য গুণাবলী ফিল্টার সঠিকভাবে কাজ করে না। আমি এটি ফিল্টারের বাইরে নিয়ে এসে ফাংশনের শরীরে অ্যাট্রিবিউট চেকটি রেখেছি এবং এটি আই 6 এ সূক্ষ্মভাবে কাজ করে।
— gt124
3
আমি স্ট্যান্ডার্ড বৈশিষ্ট্যের পরিবর্তে "ডেটা-পঠনযোগ্য = সত্য" ব্যবহার করেছি এবং এটি সমস্ত ব্রাউজারগুলিতে দুর্দান্ত কাজ করে fine আমি এই সমাধানটি আরও পছন্দ করি তারপরে অন্যদের +1
— peipst9lker
1
নির্বাচকটি $(':checkbox[readonly]')সমস্ত প্রার্থী চেকবক্স নির্বাচন করতে হবে readonlyকারণ বৈশিষ্ট্যটির মান alচ্ছিক .চ্ছিক।
— ইজহার আজমী
21

ফলাফল অর্জনের জন্য আমি এটি ব্যবহার করেছি:

<input type=checkbox onclick="return false;" onkeydown="return false;" />
— ওসামা জাভেদ
সূত্র
আমার ক্ষেত্রে এটি সেমিকোলন ছাড়াই কাজ করে, অন্যথায় এটি হয় না।
— মাউিজা
12

আমি নীচে দেওয়া সমাধানটি লক্ষ্য করেছি। এটি একই সমস্যার জন্য আমার গবেষণা পাওয়া গেছে। আমি কে এটি পোস্ট করেছি তা কিন্তু এটি আমার দ্বারা তৈরি করা হয়নি। এটি jQuery ব্যবহার করে:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

এটি চেকবাক্সগুলিকে কেবল পঠন করে তোলে যা ক্লায়েন্টকে কেবলমাত্র পঠনযোগ্য ডেটা দেখানোর জন্য সহায়ক।

— গথমের গণনা
সূত্র
1
প্রশ্নটি একটি পঠনযোগ্য চেকবাক্সের জন্য জিজ্ঞাসা করে অক্ষম নয় one সুতরাং এটি সবচেয়ে সঠিক উত্তর।
— নিলেশচৌহান
9 
onclick="javascript: return false;"
— স্যান্ডম্যান
সূত্র
হুমমম ... এটি মিথ্যা / চেক না করা মামলার জন্য কাজ করছে, তবে onclick="javascript: return true;"কেবল এটিকে একটি সাধারণ চেকবক্সের মতো কাজ করে। সংকেতগুলি? ধন্যবাদ!
— অলি
অলি, checkedঅ্যাট্রিবিউট যুক্ত করুন এবং falseজায়গায় রাখুন।
— কিওয়ারটি
7

বিলম্বিত উত্তর, তবে বেশিরভাগ উত্তরগুলি এটিকে জটিল করে দেখায়।

আমি এটি বুঝতে পারি যে ওপিটি মূলত:

  1. স্থিতি দেখানোর জন্য কেবল পঠনযোগ্য চেকবক্স।
  2. ফর্ম সহ মান ফিরিয়েছে।

এটি লক্ষ করা উচিত যে:

  1. ওপি disabledবৈশিষ্ট্যটি ব্যবহার না করা পছন্দ করে , কারণ তারা 'বাকী ফর্মের সাথে চেক করা চেক বাক্সগুলি জমা দিতে চায়'।
  2. ওপেন না করা চেকবাক্সগুলি ফর্মের সাথে জমা দেওয়া হয় না, কারণ উপরের 1 এ ওপি থেকে উদ্ধৃতিটি ইঙ্গিত করে যে তারা ইতিমধ্যে জানত। মূলত, যদি চেক করা হয় তবে কেবলমাত্র চেকবক্সের মান বিদ্যমান exists
  3. একটি অক্ষম চেকবাক্স স্পষ্টভাবে নির্দেশ করে যে এটি ডিজাইনের মাধ্যমে পরিবর্তন করা যায় না, সুতরাং কোনও ব্যবহারকারী এটি পরিবর্তন করার চেষ্টা করার সম্ভাবনা কম।
  4. একটি চেকবাক্সের মান তার স্থিতি যেমন, yesবা হিসাবে চিহ্নিত করতে সীমাবদ্ধ নয় falseতবে কোনও পাঠ্য হতে পারে।

সুতরাং, যেহেতু readonlyঅ্যাট্রিবিউটটি কাজ করে না, তাই জাভাস্ক্রিপ্টের প্রয়োজনীয়তার সেরা সমাধানটি হ'ল:

  1. নাম বা মান সহ একটি অক্ষম চেকবক্স with
  2. যদি চেকবক্সটি চেক হিসাবে প্রদর্শিত হয় তবে সার্ভারে সঞ্চিত নাম এবং মান সহ একটি লুকানো ক্ষেত্র।

সুতরাং একটি পরীক্ষিত চেকবক্সের জন্য:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />
স্নিপেট প্রসারিত করুন

চেক না করা চেকবক্সের জন্য:

<input type="checkbox" disabled="disabled" />
স্নিপেট প্রসারিত করুন

অক্ষম ইনপুটগুলি, বিশেষত চেকবাক্সগুলির প্রধান সমস্যা হ'ল তাদের দুর্বল বৈপরীত্য যা কিছু নির্দিষ্ট দৃষ্টি প্রতিবন্ধী ব্যক্তিদের জন্য সমস্যা হতে পারে। সাধারণত Status: noneবা সরল শব্দের দ্বারা একটি মান নির্দেশ করা ভাল Status: implemented, তবে উপরের লুকানো ইনপুট সহ যখন ব্যবহার করা হয় তবে যেমন:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>
স্নিপেট প্রসারিত করুন

— পাতঞ্জলি
সূত্র
7

বর্তমান উত্তরগুলির বেশিরভাগের মধ্যে এক বা একাধিক সমস্যা রয়েছে:

  1. কেবল কীবোর্ড নয় মাউসের জন্য পরীক্ষা করুন।
  2. কেবল পৃষ্ঠা লোডে পরীক্ষা করুন।
  3. সর্বদা-জনপ্রিয় পরিবর্তনকে হুক করুন বা ইভেন্টগুলি জমা দিন যা অন্য কোনও কিছুতে জড়িত থাকলে সর্বদা কার্যকর হয় না।
  4. জাভাস্ক্রিপ্ট ব্যবহার করে চেকবাক্সটি পুনরায় সক্ষম করতে আপনাকে কোনও পূর্বাবস্থায় ফিরে আসতে হবে এমন একটি লুকানো ইনপুট বা অন্যান্য বিশেষ উপাদান / বৈশিষ্ট্য প্রয়োজন।

নিম্নলিখিতটি সহজ এবং এর মধ্যে কোনও সমস্যা নেই।

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

যদি চেকবক্সটি কেবল পঠনযোগ্য হয় তবে এটি পরিবর্তন হবে না। যদি তা না হয় তবে তা হবে। এটি jquery ব্যবহার করে, তবে আপনি সম্ভবত এটি ইতিমধ্যে ব্যবহার করছেন ...

এটা কাজ করে।

— লিটল বার্ডি
সূত্র
6

আপনি যদি সেগুলি ফর্মের সাথে সার্ভারে জমা দিতে চান তবে ব্যবহারকারীর জন্য ইন্টারেক্টিভ না হন তবেpointer-events: none আপনি সিএসএস ব্যবহার করতে পারেন ( আইই 10- এবং অপেরা 12- ব্যতীত সমস্ত আধুনিক ব্রাউজারে কাজ করে ) এবং -1কীবোর্ডের মাধ্যমে পরিবর্তন রোধ করতে ট্যাব-সূচী সেট করতে  পারেন। এছাড়াও নোট করুন যে আপনি labelট্যাগটি ব্যবহার করতে পারবেন না তার উপর ক্লিক করার ফলে যেভাবেই রাষ্ট্র পরিবর্তন হবে।

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}
<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>
স্নিপেট প্রসারিত করুন

— Qwertiy
সূত্র
আমাকে আপনার শেষ বাক্যটি পুনরাবৃত্তি করতে দিন (আমি এটি মিস করেছি এবং মূল্যবান সময় নষ্ট করেছি): <ল্যাবেল> (ফায়ারফক্সে এটি পুরোপুরি কার্যকরভাবে কাজ করে তবে আপনার কৌশলটি অকেজো। সমস্যাটি ক্রোমের সাথে রয়েছে)।
— নিককলো এম।
@ নিককলোম।, তবে আপনি যদি জানেন যে এটি কেবল পাঠযোগ্য, তবে কেন এটি লেবেলে लपेटবেন? এছাড়াও আপনি এর পরে লেবেল লাগাতে পারেন এবং forবৈশিষ্ট্যটি ব্যবহার করতে পারেন । সেক্ষেত্রে আপনি ব্যবহার করতে পারেন input[type="checkbox"][readonly] + label { pointer-events: none !important; }।
— কিওয়ারটি
@ কেভিনবুই, আপনি কি সরিয়ে labelযোগ করেছেন tabindex? আপনি কোনও স্থান টিপে ফোকাসযোগ্য উপাদানকে কীভাবে ফোকাস সেট করবেন?
— কিওয়ারটি
5

এখানে কিছু উত্তর কিছুটা চতুর্দিকের মনে হলেও এখানে একটি ছোট্ট হ্যাক।

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

তারপরে jquery এ আপনি দুটি বিকল্পের একটি বেছে নিতে পারেন:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

​

ডেমো: http://jsfiddle.net/5WFYt/

— sksallaj
সূত্র
3
এবং এটি "চক্রাকার" নয় ??
— KoZm0kNoT
না এটি বেশ সরাসরি .. এটি কেবল সংক্ষিপ্ত নয়।
— স্কাল্লাজ
4

উপরের উত্তরগুলির উপর ভিত্তি করে, jQuery ব্যবহার করা হলে, এটি সমস্ত ইনপুটগুলির জন্য একটি ভাল সমাধান হতে পারে:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

আমি এএসপি নেট নেট এমভিসি দিয়ে কিছু ফর্ম উপাদান কেবল পঠন করতে সেট করতে এটি ব্যবহার করছি। উপরেরটি পাঠ্যগুলির জন্য কাজ করে এবং চেক বাক্সগুলির জন্য কোনও প্যারেন্ট পাত্রে। Readonly হিসাবে নিম্নলিখিত পরিস্থিতিতেগুলির মতো সেট করে সেট করে:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>
— ডেরিক
সূত্র
4 
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
— frag
সূত্র
4

আমি জানি যে "অক্ষম" কোনও গ্রহণযোগ্য উত্তর নয়, যেহেতু অপেরা এটি পোস্ট করতে চায়। যাইহোক, আপনি সর্বদা সার্ভার সাইড এভেন-এ মানগুলি বৈধ করতে হবে যদি আপনার কেবল পঠনযোগ্য বিকল্প সেট থাকে। এর কারণ আপনি কোনও পাঠ্যসূচক বৈশিষ্ট্য ব্যবহার করে কোনও দূষিত ব্যবহারকারীর মান পোস্ট করতে বাধা দিতে পারবেন না।

আমি মূল মানটি (সার্ভার সাইড) সংরক্ষণ এবং এটি অক্ষম করে দেওয়ার পরামর্শ দিচ্ছি। তারপরে, যখন তারা ফর্মটি জমা দেয়, পোস্ট হওয়া কোনও মান উপেক্ষা করুন এবং আপনার সঞ্চিত মূল মানগুলি গ্রহণ করুন।

এটি দেখতে এবং আচরণ করবে এটি যেমন একটি পঠনযোগ্য মূল্য। এবং এটি দূষিত ব্যবহারকারীদের পোস্টগুলি পরিচালনা করে (উপেক্ষা করে)। আপনি একটি পাথর দিয়ে 2 পাখি হত্যা করছেন।

— NL3294
সূত্র
3

আমি কনরোয়পির উত্তর সম্পর্কে মন্তব্য করব, তবে এর জন্য আমার 50 টি খ্যাতি দরকার। আমি অন্য উত্তর পোস্ট করার যথেষ্ট খ্যাতি আছে। দুঃখিত।

কনরোয়পির উত্তরের সমস্যাটি হ'ল চেকবক্সটি পৃষ্ঠায় অন্তর্ভুক্ত না করেও অপরিবর্তনীয় রেন্ডার করা হয়। যদিও ইলেক্ট্রনস_আহয় ততটা নির্ধারণ করেনি, তবে সেরা উত্তরটি হ'ল অপরিবর্তনীয় চেকবক্সটি একইরকম দেখাবে, পরিবর্তনশীল চেকবক্স যেমনটি "অক্ষম" বৈশিষ্ট্য প্রয়োগ করা হয় তেমনটিই ঘটে। একটি সমাধান যা ইলেক্ট্রন_আহয় "অক্ষম" বৈশিষ্ট্যটি ব্যবহার না করার জন্য দুটি কারণ দেয় তার সমাধান করে তবে এটি অকার্যকর হবে না কারণ এটি "অক্ষম" বৈশিষ্ট্যটি ব্যবহার করে।

দুটি বুলিয়ান ভেরিয়েবল ধরে নিন, $ চেক করা এবং $ অক্ষম:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

চেকবাক্সটি যদি চেক করা হয় তবে সত্য হিসাবে চেকবক্স প্রদর্শিত হবে। চেকবক্সটি যদি চেক করা না হয় যাচাই না করা হিসাবে প্রদর্শিত হয়। ব্যবহারকারী চেকবাক্সের অবস্থার পরিবর্তন করতে পারে যদি এবং কেবলমাত্র $ অক্ষম মিথ্যা থাকে। "আমার_নাম" প্যারামিটারটি চেকবক্সটি চেক করা না থাকলে ব্যবহারকারীর দ্বারা পোস্ট করা হয় না। "আমার_নাম = 1" পরামিতি পোস্ট করা হয় যখন চেকবক্সটি চেক করা হয়, ব্যবহারকারীর দ্বারা বা না। আমি বিশ্বাস করি এটিই ইলেকট্রন_আহয় খুঁজছিল।

— রেভিডস ডেভিড এন। জাফেরিয়ান
সূত্র
3

না, ইনপুট চেকবক্সগুলি কেবল পঠনযোগ্য নয়।

তবে আপনি জাভাস্ক্রিপ্ট দিয়ে এগুলি কেবল পঠনযোগ্য করে তুলতে পারেন!

ব্যবহারকারীকে যে কোনও উপায়ে পরিবর্তন করতে বাধা দিয়ে চেকবক্সগুলি কেবলমাত্র অনুমান হিসাবে কাজ করার জন্য এই কোডটি যে কোনও সময় যুক্ত করুন।

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});
input[type=checkbox][readonly] {
    cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>
স্নিপেট প্রসারিত করুন

JQuery লোড হওয়ার পরে আপনি যেকোন সময় এই স্ক্রিপ্টটি যুক্ত করতে পারেন।

এটি গতিশীল যুক্ত উপাদানগুলির জন্য কাজ করবে।

এটি পৃষ্ঠার যে কোনও উপাদানটিতে ক্লিক ইভেন্ট (এটি পরিবর্তনের ইভেন্টের আগে ঘটে) বাছাই করে কাজ করে, এটি তখন পরীক্ষা করে যে এই উপাদানটি কেবল পঠনযোগ্য চেকবক্স কিনা এবং যদি তা হয় তবে এটি পরিবর্তনটিকে অবরুদ্ধ করে।

এটি পৃষ্ঠার কার্যকারিতা প্রভাবিত না করার জন্য অনেকগুলি আইএফ রয়েছে।

— টিমো হুভিনেন
সূত্র
2

যদি আপনি চান আপনার সমস্ত চেকবাক্সগুলিকে "লক" করা উচিত যাতে ব্যবহারকারী যদি "পঠনযোগ্য" অ্যাটটিবুট উপস্থিত থাকে তবে "পরীক্ষিত" রাষ্ট্র পরিবর্তন করতে পারবেন না, আপনি jQuery ব্যবহার করতে পারেন:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

এই কোডটি সম্পর্কে দুর্দান্ত জিনিসটি হ'ল এটি আপনাকে প্রতিটি চেকবক্সকে পুনরায় প্রত্যাবর্তন না করে আপনার কোড জুড়ে "পঠনযোগ্য" বৈশিষ্ট্যটি পরিবর্তন করতে দেয়।

এটি রেডিও বোতামগুলির জন্যও কাজ করে।

— ড্যানিয়েল রিবেইরো
সূত্র
1

লোকেরা কেবল-পঠনযোগ্য চেক-বাক্স এবং (পাশাপাশি) কেবল একটি পঠনযোগ্য রেডিও-গ্রুপ পছন্দ করতে পারে তার মূল কারণটি যাতে পরিবর্তন করা যায় না এমন তথ্য ব্যবহারকারী যেভাবে প্রবেশ করানো হয়েছিল তা ফিরিয়ে দিতে পারে।

ঠিক আছে অক্ষম এটি করবে - দুর্ভাগ্যক্রমে অক্ষম নিয়ন্ত্রণগুলি কীবোর্ড নাব্যযোগ্য নয় এবং তাই সমস্ত অ্যাক্সেসিবিলিটি আইনকে অসম্পূর্ণ করে। এইচটিএমএল এটি আমার সবচেয়ে বড় হ্যাঙ্গআপ।

— টিম
সূত্র
1

খুব দেরীতে অবদান ... তবে যাইহোক। পৃষ্ঠার লোডে, বর্তমানে নির্বাচিত একটি বাদে সমস্ত চেকবক্সগুলি অক্ষম করতে jquery ব্যবহার করুন। তারপরে বর্তমানে নির্বাচিতটিকে কেবল পঠিত হিসাবে সেট করুন যাতে এটি অক্ষমদের মতো দেখতে একই রকম থাকে। ব্যবহারকারী মান পরিবর্তন করতে পারে না, এবং নির্বাচিত মানটি এখনও জমা দেয়।

— জেসন
সূত্র
1

পার্টিতে খুব দেরি হয়ে গেছে তবে আমি এমভিসির জন্য একটি উত্তর পেয়েছি (5) আমি চেকবক্সকে অক্ষম করে দিয়েছি এবং চেকবক্সের আগে একটি হিডেনফোর যুক্ত করেছি, সুতরাং যখন এটি পোস্ট করা হয় তবে যদি লুকানো ক্ষেত্রটি প্রথম খুঁজে পায় এবং সেই মানটি ব্যবহার করে। এটি কাজ করে।

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>
— bowlturner
সূত্র
1

আমি কেবল পঠনযোগ্য বৈশিষ্ট্যটি ব্যবহার করব

<input type="checkbox" readonly>

তারপরে মিথস্ক্রিয়া অক্ষম করতে CSS ব্যবহার করুন:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

নোট করুন যে সিউডো-ক্লাস ব্যবহার করে: কেবল পঠনযোগ্য এখানে কাজ করে না।

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}
— Gordie
সূত্র
0

আমি শুধু চাই না যে ক্লায়েন্ট নির্দিষ্ট পরিস্থিতিতে তাদের পরিবর্তন করতে সক্ষম হোক।

সত্যিই নিজেই কাজ করবে না। আপনি মজাদার কিছু ডাব্লু / সিএসএস করতে সক্ষম হতে পারেন তবে আমরা সাধারণত তাদের অক্ষম করে ফেলি।

সতর্কতা: যদি সেগুলি আবার পোস্ট করা হয় তবে ক্লায়েন্ট তাদের, সময়কাল পরিবর্তন করতে পারে। কোনও ব্যবহারকারীকে কিছু পরিবর্তন করা থেকে বিরত রাখতে আপনি কেবলমাত্র পঠনযোগ্যতার উপর নির্ভর করতে পারবেন না। এটি সর্বদা ফিডলার ব্যবহার করতে পারে বা এইচটিএমএল ডাব্লু / ফায়ারব্যাগ বা এ জাতীয় কোনও জিনিস ছাঁটাই করতে পারে।

— ওয়ালডেন লিভারিচ
সূত্র
আপনি সম্পূর্ণরূপে ঠিক বলেছেন, এজন্য আমি সার্ভারের পাশেও এটি পরীক্ষা করে দেখছি, এটি নির্ধারণ করা কেবল ক্লায়েন্টের পক্ষে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য।
— লেভিটা
0

আমার সমাধানটি আসলে ফ্লাইওয়াতের সমাধানের বিপরীত, তবে আমি নিশ্চিত নই যে এটি আপনার পরিস্থিতির জন্য কাজ করবে কিনা। আমার কাছে চেকবাক্সগুলির একটি গ্রুপ রয়েছে এবং প্রত্যেকের একটি অনক্লিক হ্যান্ডলার রয়েছে যা ফর্মটি জমা দেয় (তারা কোনও টেবিলের জন্য ফিল্টার সেটিংস পরিবর্তন করতে ব্যবহৃত হয়)। আমি একাধিক ক্লিকের অনুমতি দিতে চাই না, যেহেতু প্রথমটির পরের ক্লিকগুলি অগ্রাহ্য করা হয়। সুতরাং আমি প্রথম ক্লিকের পরে এবং ফর্মটি জমা দেওয়ার পরে সমস্ত চেকবক্সগুলি অক্ষম করে রেখেছি:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

"ফিল্টারস" এর আইডি সহ চেকবক্সগুলি স্প্যান উপাদানগুলিতে থাকে - কোডের দ্বিতীয় অংশটি একটি jQuery বিবৃতি যা চেকবক্সগুলির মাধ্যমে পুনরাবৃত্তি করে এবং প্রতিটি একটিকে অক্ষম করে। এইভাবে, চেকবক্স মানগুলি এখনও ফর্মের মাধ্যমে জমা দেওয়া হয় (যেহেতু ফর্মটি অক্ষম করার আগে ফর্মটি জমা দেওয়া হয়েছিল), এবং এটি পৃষ্ঠা পুনরায় লোড না হওয়া পর্যন্ত ব্যবহারকারীকে সেগুলি পরিবর্তন করতে বাধা দেয়।

— SK।
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.