কেন রেডিও বোতামগুলি "পঠনযোগ্য" হতে পারে না?

213

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

আশানুরূপ কাজ করার জন্য কেবল পঠনযোগ্য হওয়ার জন্য আমার কী টানতে টানতে হবে? পরিবর্তে আমি কি জাভাস্ক্রিপ্টে এটি করা উচিত?

ঘটনাচক্রে, কেউ কি জানেন যে কেন কেবল পঠনযোগ্য রেডিও বোতামগুলিতে কাজ করে না, যখন এটি অন্যান্য ইনপুট ট্যাগগুলিতে কাজ করে? এটি কি এইচটিএমএল চশমাগুলিতে এমন এক অজানা ভুল?

html  radio-button  readonly 
— mcv
সূত্র
5
"এইচটিএমএল চশমাগুলিতে এটি কি সেই অজ্ঞাত ভুল?" এটি ব্যবহারকারীর দৃষ্টিকোণ থেকে চিন্তা করুন। তারা ক্লিক করতে পারে না এমন একটি বোতাম কেন প্রদর্শন করবেন?
— পল ডি ওয়েট
67
তারা ক্লিক করতে পারে না এমন একটি বোতাম কেন প্রদর্শন করবেন? কারণ আমি তাদের বোতামটি রয়েছে তা জানতে চাই, তবে আমি চাই না যে তারা এখনই এটি ক্লিক করতে সক্ষম হবে। তবে পরে হতে পারে। এটি সর্বোপরি একটি গতিশীল ফর্ম। কেন কোনও রেডিও বোতাম অন্য কোনও ইনপুট ক্ষেত্রের চেয়ে আলাদা হবে?
— এমসিভি
7
এখানে অনুমানটি দেওয়া আছে : w3.org/TR/html401/interact/forms.html#h-17.12.2 "নিম্নলিখিত উপাদানগুলি কেবল পঠনযোগ্য বৈশিষ্ট্যকে সমর্থন করে: ইনপুট এবং টেক্সটারিএ।" যা স্পষ্টতই ভুল। যদিও এখানে ফিরে আমরা আরও নিখুঁত সংক্ষিপ্তসার দেখতে পাই: w3.org/TR/WD-forms-970402# কেবলমাত্র "পাঠ্য পাঠ্য বা পাসওয়ার্ড টাইপের INPUT উপাদানগুলিতে এবং টেক্সটারিএ উপাদানটিতে প্রযোজ্য।" দেখে মনে হচ্ছে এটি রেকস এবং চশমাগুলির ফাঁকের মধ্যে পিছলে গেছে।
— গ্রাফিকডাইভাইন
আরও কৌতূহলী। এই প্রাচীন নথি অনুসারে "চেকবক্সগুলিতে, উদাহরণস্বরূপ, আপনি সেগুলি চালু বা বন্ধ করতে পারেন (এভাবে চেক করা রাষ্ট্রটি নির্ধারণ করা) তবে আপনি ক্ষেত্রের মান পরিবর্তন করবেন না।" ( এইচটিএমএল কোডেউটোরিয়ালটি / সফটওয়্যারগুলি / এনপিপুT_ডিজাবিলডিএইচটিএমএল ) এটি কি সত্য? চেকবক্স / রেডিওতে পুনরায় সেট করা কি মানটিকে লক করে রাখে, যদিও ব্যবহারকারী দৃশ্যত এটি পরিবর্তন করতে পারে?
— গ্রাফিকডাইভাইন
আমার পোস্ট [এখানে] চেক [1] সমস্যাটি একটি পরিষ্কার সহজ সমাধান [1] দেয় stackoverflow.com/a/15513256/1861389
— driven4ward

উত্তর:

149

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

পঠনযোগ্য করার জন্য jQuery ব্যবহার করা:

$(':radio:not(:checked)').attr('disabled', true);

এই পদ্ধতিটি কেবল বাছাইয়ের জন্য একটি তালিকা তৈরি করার জন্যও কাজ করেছে, কেবলমাত্র আপনাকে নির্বাচিত প্রতিটি অপশনকে অক্ষম করতে হবে।

— মেগান
সূত্র
2
ধন্যবাদ @ মেগান, এটি একটি দুর্দান্ত সমাধান
— মাইকেল লা
9
এই readonlyসম্পত্তিটি আপনাকে ব্যবহার করার অনুমতি দেওয়ার জন্য এটিতে একটি প্রকরণ , যেমনটি ওপি আশা করেছিল যে এটি কাজ করবে:$(':radio[readonly]:not(:checked)').attr('disabled', true);
— ওয়াদা
1
নীচের সমাধানগুলির মধ্যে, এই সমাধানটি সবচেয়ে পরিষ্কার কোড সরবরাহ করে এবং জ্যাকারি বৈধকরণকারীর সাথে ভাল কাজ করে যেহেতু আমাকে ক্ষেত্রগুলি সক্ষম / অক্ষম করার দরকার নেই, বা আনবন্ডিং ক্লিক ইভেন্টগুলি নিয়ে কাজ করার প্রয়োজন নেই এবং ফর্মটি জমা দেওয়ার সময় সেগুলি পুনরায় বাইন্ডিং করতে হবে।
— ক্রিস্টিয়েন নেরোনা
নির্ভুলভাবে কাজ করে। ধন্যবাদ
— হাসান ফারুক
চতুর! .Not (..) ব্যবহার করে, আপনার যদি ইতিমধ্যে নির্বাচিত ইনপুট ক্ষেত্রগুলির একটি সেট থাকে: var myRadios = $ ('# নির্দিষ্ট-রেডিও'); myRadios.not ( ': চেক করা') ঠেকনা ( 'অক্ষম', সত্য);। api.jquery.com/not
— JoePC
206

অন্যান্য বিকল্প থাকলে কেবল রেডিও বোতামগুলি কেবল পঠনযোগ্য হবে। আপনার যদি অন্য কোনও বিকল্প না থাকে তবে একটি চেক করা রেডিও বোতামটি চেক করা যাবে না। আপনার যদি অন্য বিকল্প থাকে তবে আপনি কেবলমাত্র অন্যান্য বিকল্পগুলি অক্ষম করে ব্যবহারকারীর মান পরিবর্তন করতে বাধা দিতে পারেন:

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

ফিডল: http://jsfiddle.net/qqVGu/

— স্যাম্পসন
সূত্র
3
আপনার প্রথম সমাধানটির সমস্যাটি হ'ল আমি যদি জাভাস্ক্রিপ্টের মাধ্যমে রেডিওবোটনটি সক্ষম করতে চাই, হঠাৎ একই নাম দিয়ে আমার দুটি ক্ষেত্র রয়েছে, সুতরাং আমি তাদের একটি পরিষ্কার করতে হবে। বা বাস্তবের জন্য লুকানোটি ব্যবহার করুন এবং রেডিও বোতামটি কেবল লুকানো ক্ষেত্রের মান নির্ধারণ করুন। অন্য উপায়, আমি একটি রেডিওবটন যা চাই তার চেয়ে একটু বেশি জটিল umbers আপনার দ্বিতীয় সমাধান, যদিও আমি সন্দেহ করি না যে এটি কাজ করে, সত্যিই কুরুচিপূর্ণ হ্যাকের মতো শোনাচ্ছে। সুতরাং আমি অনুমান করি জাভাস্ক্রিপ্ট সমাধানটিই আমার মানদণ্ডের সাথে মিলিত হয়। আমি সঙ্গে যেতে হবে।
— এমসিভি
7
সমাধান 1 দয়া করে! এটি একমাত্র সঠিকভাবে অ্যাক্সেসযোগ্য। এবং যদি আপনার এটির স্ক্রিপ্ট দরকার হয় তবে লুকানো ক্ষেত্রটির সক্ষমতার রেডিওর সক্ষমতার বিপরীতে সেট করতে এটি আরও একটি লাইন।
— ববিনস করুন
5
আমি কেবল লক্ষ্য করেছি যে সমাধান 2 এবং 3 জোনাথনের উত্তরে স্থান পরিবর্তন করেছে, সুতরাং এখন মন্তব্যগুলি তেমন কোনও তাৎপর্যপূর্ণ বলে মনে হয় না।
— এমসিভি
1
জাভাস্ক্রিপ্ট সমাধানটি কাজ করে না তা লক্ষ্য করতে চান, এটি কেবল বোতামটি অন্বেষণ করে। আমি মনে করি এটি onclick="return false"পরিবর্তন রোধ করা প্রয়োজন ।
— দিমিত্রি
2
যখন আমি রেডিও "অক্ষম" সেট করি তখন আমি "অক্ষম কার্সার" অপসারণ করতে "শৈলী = কর্সার: ডিফল্ট" যুক্ত করি।
— জোয়াও পাওলো
24

এই কৌশলটি আপনি যেতে পারেন।

<input type="radio" name="name" onclick="this.checked = false;" />
— সরফরাজ
সূত্র
4
ঠিক আমি কী ভাবছিলাম, ততই ভাল হবে যদি আপনি স্পষ্ট করে বলেন যে এটি onClick="this.checked = <%=value%>"কিছু ধরণের হওয়া উচিত :)
— JustLoren
এটা জেনে রাখা দুর্দান্ত। চেক করা সত্য বা মিথ্যা মান দুটি হতে পারে।
— সরফরাজ
কেবলমাত্র একটি সতর্কতা যে এটি আমাদের মধ্যে যারা জাভাস্ক্রিপ্ট ব্রাউজ করে তা ডিফল্টরূপে চালু হয় না for
— টোলাচ করুন
3
আমার মামলার সমস্যা নেই। আমরা ইতিমধ্যে টন jQuery এবং Ajax ব্যবহার করি।
— এমসিভি
1
লক্ষণীয় যে আপনি onclick="return false;"গ্রুপটির জন্য মানটি একই রাখার জন্য করতে পারেন
— জ্যাচ
12

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

onclick="return false;"

রেডিও এবং চেকবাক্সগুলি আইপসো ফ্যাক্টো অক্ষম করার জন্য একটি মোহন হিসাবে কাজ করে।

— humbolight
সূত্র
8

সেরা সমাধানটি হ'ল চেক করা বা চেক না করা অবস্থা (ক্লায়েন্ট বা সার্ভার থেকে) সেট করা এবং ব্যবহারকারীকে ওয়ার্ডগুলির পরে এটি পরিবর্তন করতে না দেওয়া (অর্থাত্ এটি কেবল পঠনযোগ্য করে তুলুন) নিম্নলিখিতটি না করা:

<input type="radio" name="name" onclick="javascript: return false;" />
— Vipresh
সূত্র
না! এই ক্ষেত্রে, ব্যবহারকারী ব্রাউজারে এইচটিএমএল সম্পাদনা করতে পারে, নির্বাচিত হিসাবে প্রয়োজনীয় বিকল্প চিহ্নিত করতে এবং ফর্মটি পোস্ট করতে পারে।
— ত্রুটি 1009
2

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

আপনি যে প্রতিবন্ধী সম্পত্তিটি জিজ্ঞাসা করছেন তা কেবল কেন ব্যবহার করবেন না? পৃষ্ঠাটি মুদ্রণের সময় অক্ষম ইনপুট উপাদানগুলি ধূসর বর্ণের হয়ে আসে। যে গ্রাহকের জন্য এটি প্রয়োগ করা হয়েছিল তারা সমস্ত উপাদান একই রঙ থেকে বেরিয়ে আসতে চেয়েছিল।

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

অনময়েডাউন ইভেন্টগুলির সাথে, ক্লিক ক্রিয়াকলাপটি পরিবর্তন করার আগে আপনি নির্বাচনের রাজ্যটি পড়তে পারেন। সুতরাং আপনি এই তথ্য সংরক্ষণ করুন এবং তারপরে একটি অনক্লিক ইভেন্টের সাথে এই রাজ্যগুলি পুনরুদ্ধার করুন।

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

এর জাভাস্ক্রিপ্ট অংশটি তখন এটির মতো কাজ করবে (আবার কেবলমাত্র ধারণাগুলি):

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {
    // get all the elements for this group
    var radioOrSelectGroup = document.getElementsByName(elementName);

    // iterate over the group to find the selected values and store the selected ids in the selectionStore
    // ((radioOrSelectGroup[i].checked == true) tells you that)
    // remember checkbox groups can have multiple checked items, so you you might need an array for the ids
    ...
}

function setSelectedStateForEachElementOfThisGroup(elementName) {
    // iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
    ...

    // make sure you return false here
    return false;
}

আপনি এখন ইনপুট উপাদানগুলির অনক্লিক এবং অনময়েডাউন বৈশিষ্ট্যগুলি পরিবর্তন করে রেডিও বোতাম / চেকবক্সগুলিকে সক্ষম / অক্ষম করতে পারবেন।

— টম
সূত্র
2

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

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
— dpolican
সূত্র
4
checked="yes"? এটা কি অনুমান? হয় ব্যবহার করুন checked="checked"বা checkedমান ব্যতীত কেবল গুণাবলী । একই জন্য disabled।
— রবিন ভ্যান বালেন
2

জাভাস্ক্রিপ্ট উপায় - এটি আমার জন্য কাজ করেছে।

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

কারণ:

  1. $('#YourTableId').find('*') -> এটি সমস্ত ট্যাগ দেয়।

  2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); এতে ধরা সমস্ত বস্তুর উপরে পুনরাবৃত্তি ঘটে এবং ইনপুট ট্যাগগুলি অক্ষম করে।

বিশ্লেষণ (ডিবাগিং):

  1. form:radiobutton অভ্যন্তরীণভাবে একটি "ইনপুট" ট্যাগ হিসাবে বিবেচিত হয়।

  2. উপরের ফাংশনের মতো (), আপনি মুদ্রণের চেষ্টা করলে document.write(this.tagName);

  3. যেদিকেই, ট্যাগগুলিতে এটি রেডিও বোতামগুলি সন্ধান করে, এটি একটি ইনপুট ট্যাগ দেয়।

সুতরাং, উপরের কোড লাইনটি রেডিও বোতাম ট্যাগগুলির জন্য * ইনপুট দিয়ে প্রতিস্থাপন করে আরও অনুকূলিত করা যায়: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

— user3702798
সূত্র
1

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

— wintermute
সূত্র
1

আমি দেখতে পেয়েছি যে ব্যবহারটি onclick='this.checked = false;'একটি নির্দিষ্ট পরিমাণে কাজ করেছে। ক্লিক করা একটি রেডিও বোতামটি নির্বাচন করা হবে না। তবে, যদি ইতিমধ্যে নির্বাচিত একটি রেডিও বোতাম থাকে (যেমন, একটি ডিফল্ট মান), তবে সেই রেডিও বোতামটি অনির্বাচিত হয়ে যায়।

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

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

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

এই সমাধানটি ডিফল্ট মান পরিবর্তন হওয়া থেকে রোধ করার সর্বাধিক মার্জিত উপায় নয় তবে জাভাস্ক্রিপ্ট সক্ষম করা আছে কি না তা এটি কাজ করবে।

— JW8
সূত্র
1

বৈশিষ্ট্যটি চেষ্টা করে দেখুন disabledতবে আমি মনে করি আপনি রেডিও বোতামের মান পাবেন না। অথবা এর পরিবর্তে চিত্রগুলি সেট করুন:

<img src="itischecked.gif" alt="[x]" />radio button option

শুভেচ্ছান্তে.

— টিম
সূত্র
1
ওহ, আমার এইচটিএমএল কোডটি ছিনিয়ে নেওয়া হয়েছে: img src = "itIsChecked.gif" Alt = "[x]" OptionChecked
— টিম
0

আমি একটি জেএস প্লাগইন ব্যবহার করছি যা চেকবক্স / রেডিও ইনপুট উপাদানগুলিকে স্টাইল করে এবং একটি 'পঠনযোগ্য রাষ্ট্র' প্রতিষ্ঠার জন্য নিম্নলিখিত jQuery ব্যবহার করে যেখানে অন্তর্নিহিত মানটি এখনও পোস্ট করা হয় তবে ইনপুট উপাদানটি ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য বলে মনে হয়, যার কারণে আমি বিশ্বাস করি উদ্দেশ্যযুক্ত কারণ আমরা কেবল পঠনযোগ্য ইনপুট বৈশিষ্ট্যটি ব্যবহার করব ...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}
— chopstik
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.