অক্ষম থাকা ইনপুট চেকবক্সটি কীভাবে পোস্ট / জমা দিতে হবে?


130

আমার একটি চেকবাক্স রয়েছে যা নির্দিষ্ট শর্তাবলীতে অক্ষম করা দরকার। দেখা যাচ্ছে HTTP অক্ষম ইনপুটগুলি পোস্ট করে না।

আমি কিভাবে এটি কাছাকাছি পেতে পারি? ইনপুটটি অক্ষম করা এবং ইনপুট অক্ষম রাখার পরেও জমা দেওয়া?


আমি মনে করি এই সমাধানটি এখানেও সহায়তা করে: stackoverflow.com/questions/12769664/…
সেরেজ ফমিন

আমি মনে করি এই সমাধানটি এখানেও সহায়তা করে: stackoverflow.com/questions/12769664/…
সেরেজ ফমিন

উত্তর:


106

আপডেট : READONLYচেকবক্সে কাজ করে না

আপনি ব্যবহার করতে পারেন disabled="disabled"তবে এই মুহুর্তে চেকবক্সের মান POSTমানগুলিতে উপস্থিত হবে না । কৌশলগুলির মধ্যে একটি হ'ল একই ফর্মের মধ্যে একটি লুকানো ফিল্ড হোল্ডিং চেকবক্সের মান যুক্ত করা এবং সেই ক্ষেত্র থেকে মানটি পড়া

কেবলমাত্র পরিবর্তন disabledকরতেreadonly


7
এটি বৈধ এইচটিএমএল করতে, বিশেষভাবে পাঠ্যপুস্তককে কেবল পঠনযোগ্যতার জন্য মান নির্ধারণ করুন:<input name="foo" value="bar" readonly="readonly" />
ম্যাট হাগিনস

5
"অক্ষম" ক্ষেত্রের মতো দেখতে "পঠনযোগ্য" ইনপুট ক্ষেত্রটি পেতে 'স্টাইল = "রঙ: ধূসর; পটভূমি-রঙ: # F0F0F0;"' সেট করুন।
ড্যান নিসেনবাউম

3
@ ম্যাটহাগিনস কেবলমাত্র-বিশিষ্ট-নাম বৈশিষ্ট্যের জন্য মান নির্ধারণ করা যেমন চেক, পঠনযোগ্য ইত্যাদি ... এবং নন-জুটি বৈশিষ্ট্যগুলিতে শেষ স্ল্যাশের এইচটিএমএল বৈধতার সাথে কোনও সম্পর্ক নেই - এগুলি
এইচএইচটিএমএল

বিটিডব্লিউ: সম্ভবত এ সম্পর্কে কাউকে হোঁচট খায়: ইনপুট টাইপ = বোতামের জন্য এটি ব্যবহার করবেন না, তারা "অক্ষম" হবে না, "অক্ষম = 'অক্ষম' ব্যবহার করবে"
মিস্টার শ্নিটসেল

2
readonlyআপনি এই জাতীয় ট্যাগ সহ একটি চেকবক্সের মান পোস্ট করতে পারবেন না, কাজ করবে না, disabledচেকবক্সের মান ধরে রাখতে লুকানো ইনপুট উপাদানটি সহ ব্যবহার করুন, দেখুন কীভাবে: stackoverflow.com/a/8274787/448816
mikhail-t

91

আমি এই সমস্যাটি সমাধান করেছি।

যেহেতু readonly="readonly"ট্যাগ কাজ করছে না (আমি বিভিন্ন ব্রাউজার চেষ্টা করেছি), তার disabled="disabled" পরিবর্তে আপনাকে ব্যবহার করতে হবে। তবে আপনার চেকবক্সের মান পোস্ট করা হবে না ...

এখানে আমার সমাধান:

পেতে "কেবলমাত্র" লুক এবং পোষ্ট একই সময় চেকবক্সটি এর মান, শুধু একটি গোপন "ইনপুট" একই নাম এবং আপনার চেকবক্সটি যেমন মান যোগ । আপনাকে এটিকে আপনার চেকবক্সের পাশে বা একই <form></form>ট্যাগের মধ্যে রাখতে হবে :

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

এছাড়াও, কেবলমাত্র আপনাকে জানাতে readonly="readonly", readonly="true", readonly="",বা এটি READONLYসমাধান করবে না! আমি এটি কয়েক ঘন্টা ব্যয় করেছি!

এই রেফারেন্সটি প্রাসঙ্গিকও নয় (এখনও নাও হতে পারে, না আমার আর কোনও ধারণা নেই): http://www.w3schools.com/tags/att_input_readonly.asp


লুকানো এবং চেকবক্স ইনপুটগুলির জন্য এখানে একই আইডি থাকতে হবে?
ব্যবহারকারী 2167382

না, আইডি যা-ই হতে পারে, তবে 'নাম' এবং 'মান' একই হতে হবে।
মিখাইল-টি

বিভিন্ন ব্রাউজারে এটি কতটা নির্ভরযোগ্য?
টিম

এটি সর্বশেষতম ক্রোম, ফায়ারফক্স এবং আইই ১১-তে ভালভাবে পরীক্ষা করা এবং কাজ করা হয়েছিল, এখানে একটি বাস্তবায়ন রয়েছে, এটি আপনার ব্রাউজারে ব্যবহার করে দেখুন: mvccbl.com/…
-টি

74

আপনি যদি জিকিউরি ব্যবহার করে খুশি হন তবে ফর্মটি জমা দেওয়ার সময় অক্ষম বৈশিষ্ট্যটি সরিয়ে ফেলুন:

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

এটি কি ইউআই-তে নিয়ন্ত্রণ "সক্ষম" করবে?
আনার খলিলভ

এটি হ্যাঁ তত্ত্বের ক্ষেত্রে অক্ষম বৈশিষ্ট্যটিকে সরিয়ে দেয়। অনুশীলনে আমি মনে করি না যে ব্যবহারকারী এটি ঘটছে এবং জমা দেওয়া ফর্মের মধ্যে UI এর মাধ্যমে ক্ষেত্রটি পরিবর্তন করতে পারে ... আমি নিশ্চিতভাবে জানতে আগ্রহী হব।
ত্রিস্তান চ্যানিং

একটি পুরাতন বিট, কিন্তু sidenote যেমন: আপনি ব্যবহার করেন তাহলে <select>বা <textfield>সমর্থন বা অন্যান্য HTML উপাদানগুলি disabledঅ্যাট্রিবিউট, আপনি তাদের নির্বাচন করে দিয়ে সমস্ত সক্ষম করতে পারবেন: $( "*:disabled" ).removeAttr("disabled");
Gusstavv গিল

10

আপনি এটি এইভাবে পরিচালনা করতে পারেন ... প্রতিটি চেকবক্সের জন্য, একই nameবৈশিষ্ট্য সহ একটি লুকানো ক্ষেত্র তৈরি করুন । তবে সেই লুকানো ক্ষেত্রের মানটি কিছু ডিফল্ট মান দিয়ে সেট করুন যা আপনি এর বিরুদ্ধে পরীক্ষা করতে পারেন। উদাহরণ স্বরূপ..

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

ফর্মটি জমা দেওয়ার সময় যদি চেকবক্সটি "চেক" করা হয়, তবে সেই ফর্মের প্যারামিটারের মান হবে

"agree,false"

যদি চেকবক্সটি চেক না করা হয় তবে মানটি হবে

"false"

আপনি "মিথ্যা" পরিবর্তে কোনও মান ব্যবহার করতে পারেন, তবে আপনি ধারণাটি পাবেন।


5
আপনি যখন কোনও সমস্যার জটিল জটিল সমাধান লিখে কেবল তা ঘৃণা করেন না এবং তখন আপনি যখন সতেজ হন, তখন কেউ (ফ্রান্সেস্কোর মতো) গিয়ে একটি সাধারণ ওয়ান-লাইনার লেখেন? ;)
জেসেগাভিন

এটি আমি যা অর্জন করার চেষ্টা করছি তার জন্য এটি উপযুক্ত, আমি চাই না চেক করা বাক্সটি কোনও কিছুর পরিবর্তে একটি মূল্য জমা দিতে চাই, ধন্যবাদ: ডি।
জেফ্রি

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

8
<input type="checkbox" checked="checked" onclick="this.checked=true" />

আমি সমস্যাটি থেকে শুরু করেছি: "অক্ষম থাকা কোনও ইনপুট চেকবক্স পোস্ট / জমা দিতে কীভাবে?" এবং আমার উত্তরে আমি মন্তব্যটি এড়িয়ে গেছি: "আমরা যদি একটি চেকবক্স অক্ষম করতে চাই তবে অবশ্যই অবশ্যই একটি উপসর্গযুক্ত মান রাখা উচিত (চেক বা চেক না করা) এবং এছাড়াও আমরা ব্যবহারকারী এটি সম্পর্কে সচেতন হতে চাই (অন্যথায় আমাদের কোনও লুকানো প্রকার এবং একটি চেকবক্স নয়) "। আমার উত্তরে আমি অনুমান করেছি যে আমরা সর্বদা একটি চেকবক্স চেক রাখতে চাই এবং সেই কোডটি এইভাবে কাজ করে। আমরা যদি সেই সেকেকবক্সে ক্লিক করি তবে এটি চিরকালের জন্য পরীক্ষা করা হবে এবং এর মান পোস্ট করা / জমা দেওয়া হবে! একইভাবে যদি আমি অন্লিক = "this.checked = মিথ্যা" লিখে চেক না করে = "পরীক্ষিত" (নোট: ডিফল্টটি চেক করা হয় না) চিরকালের জন্য তা পরীক্ষা করা হবে এবং এর মান পোস্ট করা / জমা দেওয়া হবে না !.


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

8

সিএসএস ক্লাস তৈরি করুন যেমন:

.disable{
        pointer-events: none;
        opacity: 0.5;
}

অক্ষম বৈশিষ্ট্যের পরিবর্তে এই শ্রেণিটি প্রয়োগ করুন


7

এর সহজ উপায় হ'ল:

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

এটি ব্যবহারকারীকে এই চেকবক্সটি নির্বাচন করতে সক্ষম হতে বাধা দেবে এবং ফর্মটি জমা দেওয়ার পরে এটি তার মানটি জমা দেবে। আপনি চান কিনা ব্যবহারকারী এই চেকবক্সটি নির্বাচন করতে সক্ষম না হলে চেক করুন সরান।

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

http://jsfiddle.net/vwUUc/


4

এটি একটি কবজির মতো কাজ করে:

  1. "অক্ষম" বৈশিষ্ট্যগুলি সরান
  2. ফর্ম জমা দিন
  3. আবার বৈশিষ্ট্যগুলি যুক্ত করুন । এটি করার সর্বোত্তম উপায় হ'ল সেটটাইমআউট ফাংশনটি ব্যবহার করা , যেমন 1 মিলিসেকেন্ড বিলম্ব সহ।

কেবলমাত্র অসুবিধা হ'ল জমা দেওয়ার সময় অক্ষম ইনপুট ক্ষেত্রগুলির সংক্ষিপ্ত ফ্ল্যাশিং । কমপক্ষে আমার পরিস্থিতিতে যে সমস্যাটি অনেকটা নয়!

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.push(true);
    } else 
      disabledInputs.push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});

3

এটি অক্ষম করবেন না; পরিবর্তে এটি কেবল পঠনযোগ্য হিসাবে সেট করুন, যদিও এটির রাষ্ট্র পরিবর্তন করতে না দেওয়ার কারণে এর কোনও প্রভাব নেই। তবে আপনি এটিকে প্রয়োগ করতে jQuery ব্যবহার করতে পারেন (ব্যবহারকারীকে চেকবক্সের অবস্থা পরিবর্তন থেকে বিরত করুন:

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

এটি ধরে নিয়েছে যে আপনি যে সমস্ত চেকবক্সগুলি সংশোধন করতে চান না তার "পঠনযোগ্য" বৈশিষ্ট্য রয়েছে। যেমন।

<input type="checkbox" readonly="readonly">

এই জন্য আপনাকে ধন্যবাদ! কোনও কারণে, "লুকানো" ইনপুট আমার পক্ষে কাজ করছে না। এটি আমাকে বাঁচায়। সত্যিই খুব সুন্দর হ্যাক!
নিউবিপি প্রোগ্রামার

3

থেকে:

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

আমি আপনাকে আরেকটি সম্ভাবনা দিচ্ছি:

আপনার চেকবক্সটি স্বাভাবিক হিসাবে অক্ষম হিসাবে সেট করুন। এবং ব্যবহারকারী দ্বারা ফর্ম জমা দেওয়ার আগে জাভাস্ক্রিপ্ট দ্বারা এই চেকবক্সটি সক্ষম করুন।

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

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


1

দুর্ভাগ্যক্রমে কোনও 'সরল' সমাধান নেই। পঠনযোগ্য বৈশিষ্ট্যটি চেকবক্সগুলিতে প্রয়োগ করা যায় না। আমি চেকবাক্স সম্পর্কে ডাব্লু 3 স্পেশালটি পড়ে অপরাধীর সন্ধান পেয়েছি:

ফর্মটি জমা দেওয়ার সময় যদি কোনও নিয়ন্ত্রণের বর্তমান মান না থাকে তবে ব্যবহারকারী এজেন্টদের এটিকে একটি সফল নিয়ন্ত্রণ হিসাবে বিবেচনা করার প্রয়োজন হয় না। ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

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

  • readonly = "readonly" চেকবাক্সগুলির জন্য একটি বৈধ বৈশিষ্ট্য নয়।
  • onclick = "event.preventDefault ();" এটি চেকবক্সে নিজেই ট্রিগার হওয়ার কারণে এটি সর্বদা ভাল সমাধান নয়। তবে এটি কিছু অনুষ্ঠানে কমনীয় কাজ করতে পারে।
  • সাবমিটকে চেকবক্স সক্ষম করা কোনও সমাধান নয় কারণ নিয়ন্ত্রণটি এখনও একটি সফল নিয়ন্ত্রণ হিসাবে বিবেচিত হয় না তাই মানটিকে বিশ্লেষণ করা হবে না।
  • আপনার এইচটিএমএলে একই নামের সাথে অন্য কোনও লুকানো ইনপুট যুক্ত করা কার্যকর হয় না কারণ প্রথম নিয়ন্ত্রণ মানটি একই নাম হিসাবে দ্বিতীয় নিয়ন্ত্রণ মান দ্বারা ওভাররাইট করা হয়।

এটি করার একমাত্র পুরো-প্রমাণী উপায় হ'ল ফর্ম জমা দেওয়ার সময় জাভাস্ক্রিপ্ট সহ একই নামের একটি গোপন ইনপুট যুক্ত করা

আপনি এটির জন্য তৈরি ছোট স্নিপেট ব্যবহার করতে পারেন:

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

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

এই ফাংশনটি ফর্ম উপাদানটিতে ইভেন্ট 'অনসামিত' দ্বারা ট্রিগার করা উচিত:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>


1

hiddenক্ষেত্র ব্যতীত অন্য কোনও বিকল্প নেই , সুতরাং hiddenনীচের কোডে প্রদর্শিত ফিল্ড ব্যবহার করার চেষ্টা করুন :

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

0
<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

ফাংশন কিছু_নামটি দ্বিতীয় চেকবক্সটি পরিচালনা করার জন্য পূর্ববর্তী ধারাটির একটি উদাহরণ যা চেক করা হয় (এর মান পোস্ট করে) বা চেক করা হয় (এর মানটি পোস্ট করে না) ধারা অনুসারে এবং ব্যবহারকারী তার স্থিতি পরিবর্তন করতে পারে না; দ্বিতীয় চেকবক্সটি কোনও অক্ষম করার ব্যবস্থা করার দরকার নেই


0

আপনি এটি পছন্দসই হিসাবে অক্ষম রাখতে পারেন এবং তারপরে ফর্মটি জমা দেওয়ার আগে অক্ষম বৈশিষ্ট্যটি সরিয়ে ফেলুন।

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});

0

যোগ করার পদ্ধতি onclick="this.checked=true"সমাধান আমার সমস্যা:
উদাহরণ:

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />

0

এখানে আরও একটি কাজ ব্যাকএন্ড থেকে নিয়ন্ত্রণ করা যায়।

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

এএসপিএক্স.সি.এস.

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

ক্লাস কেবল শৈলীর উদ্দেশ্যে যুক্ত করা হয়।


0

আমি কেবল উত্তরগুলিতে এইচটিএমএল, জেএস এবং সিএসএসের পরামর্শগুলি একত্রিত করেছি

এইচটিএমএল:

<input type="checkbox" readonly>

JQuery:

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

সিএসএস:

input[type="checkbox"][readonly] {
  cursor: not-allowed;
  opacity: 0.5;
}

উপাদানটি 'অক্ষম' না হওয়ায় এটি এখনও পোস্টের মধ্য দিয়ে যায়।

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