jquery ব্যবহার করে পাঠ্যবক্সটি অক্ষম করবেন?

Question

আমার একই নাম এবং বিভিন্ন মান সহ তিনটি রেডিও বোতাম রয়েছে I আমি যখন তৃতীয় রেডিও বোতামটি ক্লিক করব তখন চেকবক্স এবং পাঠ্যবক্সটি অক্ষম হয়ে যাবে ut তবে আমি যখন দুটি অন্যান্য রেডিও বোতামটি বেছে নেব তখন অবশ্যই এটি প্রদর্শন করা উচিত J অগ্রিম ....

<form name="checkuserradio">
    <input type="radio" value="1" name="userradiobtn" id="userradiobtn"/> 
    <input type="radio" value="2" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="3" name="userradiobtn" id="userradiobtn"/>
    <input type="checkbox" value="4" name="chkbox" />
    <input type="text" name="usertxtbox" id="usertxtbox" />
</form>

Comments

আপনার অভিন্ন আইডিগুলি সরানো উচিত। nameগুলি অভিন্ন হতে পারে তবে idএর অবশ্যই অনন্য হতে হবে।

— এরিক

Answer 1

এইচটিএমএল

<span id="radiobutt">
  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="radio" name="rad1" value="3" />
</span>
<div>
  <input type="text" id="textbox1" />
  <input type="checkbox" id="checkbox1" />
</div>

জাভাস্ক্রিপ্ট

  $("#radiobutt input[type=radio]").each(function(i){
    $(this).click(function () {
        if(i==2) { //3rd radiobutton
            $("#textbox1").attr("disabled", "disabled"); 
            $("#checkbox1").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox1").removeAttr("disabled"); 
            $("#checkbox1").removeAttr("disabled"); 
        }
      });

  });

Comments

@ভিনথকুমার: ম্যাট এর উত্তর আরও কার্যকর। আমার খুব একটা ভাল উদাহরণ হিসাবে নাও।

— Okw

এখানে আমি i মান নির্ধারণ করতে পারি যেখানে।

— এসকেকে

@vinothkumar iথেকে পাস করা হয়েছে function(i)jQuery এর মধ্যে মাধ্যমে each()। i==2তৃতীয় রেডিও বোতামটি অ্যাক্সেস করতে ব্যবহৃত হয়। আমার কোডগুলি দেখুন।

— 11

পুরানো ব্রাউজারগুলির জন্য কোন দয়া?

— সেরেপটা

<span id="radiobutt">- রেডিওহিডের কাজিন?

— আইসমানিন্ড

Answer 2

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

$("#radiobutt input[type=radio]").each(function(i) {
    if (i == 2) { //3rd radiobutton
        $(this).click(function () {
            $("#textbox1").attr("disabled", "disabled");
            $("#checkbox1").attr("disabled", "disabled");
        });
    } else {
        $(this).click(function () {
            $("#textbox1").removeAttr("disabled");
            $("#checkbox1").removeAttr("disabled");
        });
    }
});

Answer 3

এই থ্রেডটি কিছুটা পুরানো তবে তথ্য আপডেট করা উচিত।

http://api.jquery.com/attr/

ফর্ম উপাদানগুলির পরীক্ষিত, নির্বাচিত বা অক্ষম রাষ্ট্রের মতো DOM বৈশিষ্ট্য পুনরুদ্ধার এবং পরিবর্তন করতে .prop () পদ্ধতিটি ব্যবহার করুন।

$("#radiobutt input[type=radio]").each(function(i){
$(this).click(function () {
    if(i==2) { //3rd radiobutton
        $("#textbox1").prop("disabled", true); 
        $("#checkbox1").prop("disabled", true); 
    }
    else {
        $("#textbox1").prop("disabled", false); 
        $("#checkbox1").prop("disabled", false);
    }
  });
});

Comments

+1, তবে আমি পেয়েছি যে আপনি removePropঅক্ষম সম্পত্তি হিসাবে ব্যবহার করতে পারবেন না । JQuery ডক্স prop("disabled", false);পরিবর্তে ব্যবহার করতে বলে । api.jquery.com/prop/#prop-propertyName-value

— Lee Grissom

প্রোপ () ব্যবহারের এটি ফারা উপায়। চেকবক্সগুলিতে অ্যাটর () ব্যবহার করার বিষয়ে আমার কিছু সমস্যা ছিল। প্রথমবার ঠিক আছে দ্বিতীয়বার কোনও প্রতিক্রিয়া নেই। সুতরাং প্রোপ ব্যবহার করুন ()। আমার কাছ থেকে +1

— ব্র্যান্ডেলাইজার

Answer 4

আমি নিশ্চিত না যে এর সমাধানগুলির মধ্যে কিছু .each () ব্যবহার করে - এটি প্রয়োজনীয় নয়।

এখানে কিছু কার্যকারী কোড যা তৃতীয় চেকবক্সটি ক্লিক করা থাকলে অক্ষম করে, অন্যথায় অক্ষম বৈশিষ্ট্যটিকে মুছে ফেলা হয়।

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

$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

Comments

@ স্কট: each()ব্যবহৃত হয়েছিল কারণ আমরা তৃতীয় রেডিও বোতামটি পেতে চাই। আমরাও ব্যবহার $("input[type=radio]:eq(2)")করতে পারি। আপনার পদ্ধতিটি রেডিও বোতামটি মান দ্বারা চিহ্নিত করে, অবশ্যই কোনটি বৈধ। :)

— ঠিক

যদি ব্যবহারকারী প্রথমে চেকবক্সটি নির্বাচন করে পাঠ্যবাক্সে কিছু পাঠ্য প্রবেশ করে এবং তারপরে যদি তিনি রেডিও বোতামটি চয়ন করেন তবে অবশ্যই চেক করা বাক্সটি চেক করা উচিত নয় এবং পাঠ্যবক্সটি সাফ করতে হবে? আমি কীভাবে এটি করতে পারি ... আমি এই প্রশ্নগুলি জিজ্ঞাসা করি কারণ আমি anewbie ... অগ্রিম ধন্যবাদ ..

— svk

@ ভিনোথকুমার - সেই প্রয়োজনীয়তার কথা মাথায় রেখে আমি সম্ভবত উপরের মতো জেএসটি স্থাপন করতে পারতাম না, তবে এই ক্ষেত্রে, কেবলমাত্র পরীক্ষাটি উপাদানটি অক্ষম রয়েছে এবং আইতে $ ("# ইউজার টেক্সটবক্স") কল করুন val ("") ভাল ("") হবে

— ScottE

Answer 5

আমি জানি কোন পুরানো প্রশ্নের উত্তর দেওয়া ভাল অভ্যাস নয় তবে আমি এই উত্তরটি এমন লোকদের জন্য রেখেছি যারা প্রশ্নটি পরে দেখবে।

জিকুয়েরিতে এখন রাষ্ট্র পরিবর্তন করার সর্বোত্তম উপায় is

$("#input").prop('disabled', true); 
$("#input").prop('disabled', false);

সম্পূর্ণ চিত্রের জন্য দয়া করে এই লিঙ্কটি চেক করুন। JQuery দিয়ে কোনও ইনপুট অক্ষম / সক্ষম করবেন?

Comments

প্রতি জেকুরি অফিশিয়াল ওয়েবসাইট, প্রপ যাবার উপায়। +1

— মোইজ টানকিওয়ালা

Answer 6

আমি এটা কিছুটা ভিন্ন করতাম

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />   
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />    
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>   
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>    
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />   

শ্রেণীর বৈশিষ্ট্য লক্ষ্য করুন

 $(document).ready(function() {      
    $('.disablebox').click(function() {
        $('.showbox').attr("disabled", true);           
    });
});

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

Answer 7

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

function enableInput(class){
    $('.' + class + ':input').attr('disabled', false);
}

function disableInput(class){
    $('.' + class + ':input').attr('disabled', true);
}

$(document).ready(function(){
    $(".changeBoxes").click(function(event){
        var value = $(this).val();
        if(value == 'x'){
            enableInput('foo'); //with class foo
            enableInput('bar'); //with class bar
        }else{
            disableInput('foo'); //with class foo
            disableInput('bar'); //with class bar
        }
    });
});

Comments

সরবরাহ করা এইচটিএমএল দিয়ে আমি এই কাজটি করি নি, তবে এটি বেশ সহজ ইমো।

— নীলস বোম

Answer 8

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

প্রথমত, আপনার .each () ব্যবহার করা উচিত নয় এবং নির্দিষ্ট রেডিও বোতামটি নির্দেশ করতে সূচিটি ব্যবহার করা উচিত। আপনি যদি রেডিও বোতামগুলির গতিশীল সেট নিয়ে কাজ করেন বা আপনি পরে কিছু রেডিও বোতাম যুক্ত করেন বা সরিয়ে থাকেন তবে আপনার কোডটি ভুল বোতামে প্রতিক্রিয়া জানাবে!

পরবর্তী, তবে ওপিটি তৈরি হওয়ার সময় সম্ভবত এটি ছিল না, আমি ক্লিক করার পরিবর্তে .on ('ক্লিক', ফাংশন () {...}) ব্যবহার করতে পছন্দ করি ... http: //api.jquery ery কম / চালু /

পাছে তবে তা নয়, এর নামের ভিত্তিতে রেডিও বোতামটি নির্বাচন করে কোডটি আরও সহজ এবং ভবিষ্যতের প্রমাণ হিসাবে তৈরি করা যেতে পারে (তবে এটি ইতিমধ্যে একটি পোস্টে উপস্থিত হয়েছিল)।

সুতরাং আমি নিম্নলিখিত কোড দিয়ে শেষ।

এইচটিএমএল (ওকিউ কোডের ভিত্তিতে)

<span id="radiobutt">
    <input type="radio" name="rad1" value="1" />
    <input type="radio" name="rad1" value="2" />
    <input type="radio" name="rad1" value="3" />
</span>
<div>
    <input type="text" id="textbox1" />
    <input type="checkbox" id="checkbox1" />
</div>

জাতীয়-কোড

$("[name='rad1']").on('click', function() {
    var disable = $(this).val() === "2";
    $("#textbox1").prop("disabled", disable); 
    $("#checkbox1").prop("disabled", disable); 
});

Answer 9

এমভিসি 4 @ এইচটিএমএল.চেকবক্সের জন্য সাধারণত লোকেরা এমভিসি চেকবক্সটি চেক এবং আনচেক করার বিষয়ে পদক্ষেপ নিতে চায়।

<div class="editor-field">
    @Html.CheckBoxFor(model => model.IsAll, new { id = "cbAllEmp" })
</div>

আপনি যে কন্ট্রোলগুলি পরিবর্তন করতে চান তার জন্য আইডি সংজ্ঞায়িত করতে পারেন এবং জাভাস্ক্রিপ্টে ফলোয়িং করতে পারেন

<script type="text/javascript">
    $(function () {
        $("#cbAllEmp").click("", function () {
            if ($("#cbAllEmp").prop("checked") == true) {
                    $("#txtEmpId").hide();
                    $("#lblEmpId").hide();
                }
                else {
                    $("#txtEmpId").show();
                    $("#txtEmpId").val("");
                    $("#lblEmpId").show();
             }
        });
    });

আপনি যেমন সম্পত্তি পরিবর্তন করতে পারেন

$("#txtEmpId").prop("disabled", true); 
$("#txtEmpId").prop("readonly", true); 

Answer 10

$(document).ready(function () {
   $("#txt1").attr("onfocus", "blur()");
});

$(document).ready(function () {
  $("#txt1").attr("onfocus", "blur()");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="txt1">

Answer 11

রেডিও বোতামের মান পান এবং এটির সাথে 3 টি অক্ষম হলে প্রতিটির সাথে মেলে checkbox and textbox।

$("#radiobutt input[type=radio]").click(function () {
    $(this).each(function(index){
    //console.log($(this).val());
        if($(this).val()==3) { //get radio buttons value and matched if 3 then disabled.
            $("#textbox_field").attr("disabled", "disabled"); 
            $("#checkbox_field").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox_field").removeAttr("disabled"); 
            $("#checkbox_field").removeAttr("disabled"); 
        }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="radiobutt">
  <input type="radio" name="groupname" value="1" />
  <input type="radio" name="groupname" value="2" />
  <input type="radio" name="groupname" value="3" />
</span>
<div>
  <input type="text" id="textbox_field" />
  <input type="checkbox" id="checkbox_field" />
</div>