jquery का उपयोग करके टेक्स्टबॉक्स को अक्षम करें?

Question

मेरे पास एक ही नाम और विभिन्न मूल्यों के साथ तीन रेडियो बटन हैं। जब मैं तीसरे रेडियो बटन पर क्लिक करता हूं तो चेकबॉक्स और टेक्स्टबॉक्स अक्षम हो जाता है। लेकिन जब मैं अन्य दो रेडियो बटन चुनता हूं तो उसे दिखाना होगा। मुझे Jquery में मदद की आवश्यकता है। धन्यवाद अग्रिम ....

<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

आपको समान आईडी को हटाना चाहिए। names समान हो सकता है, लेकिन ids अद्वितीय होना चाहिए।

— एरिक

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

@vinothkumar: मैट का उत्तर अधिक कुशल है। एक उदाहरण के रूप में मेरा उदाहरण लें।

— ओकेव

यहाँ जहाँ हम i value define कर सकते हैं।

— svk

@vinothkumar को JQuery के माध्यम iसे पास किया गया है । 3 रेडियो बटन तक पहुँचने के लिए उपयोग किया जाता है। मेरे कोड देखें। function(i)each()i==2

— okw

पुराने ब्राउज़रों के लिए कोई दया?

— सप्तपर्ण

<span id="radiobutt">- रेडियोहेड का चचेरा भाई?

— आइसमैन

Answer 2

वास्तव में आवश्यक नहीं है, लेकिन okw के कोड में एक छोटा सा सुधार है जो फ़ंक्शन को तेजी से कॉल करेगा (चूंकि आप फ़ंक्शन कॉल के बाहर सशर्त स्थानांतरित कर रहे हैं)।

$("#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 प्रॉपर्टीज़ के चेक किए गए, चुने हुए या अक्षम किए गए राज्य जैसे 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

यह प्रोप () का उपयोग करने का बेहतर तरीका है। चेकबॉक्‍स पर attr () का उपयोग करने पर मेरे पास कुछ मुद्दे थे। पहली बार इसकी ठीक दूसरी बार कोई प्रतिक्रिया नहीं। तो प्रोप () का उपयोग करें। मेरे से +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

@ScottE: each()का उपयोग इसलिए किया गया क्योंकि हम तीसरा रेडियो बटन प्राप्त करना चाहते हैं। हम भी उपयोग कर सकते हैं $("input[type=radio]:eq(2)")। आपकी विधि रेडियो बटन को मान से पहचानती है, जो निश्चित रूप से मान्य है। :)

— ठीक है

यदि उपयोगकर्ता पहले चेकबॉक्स का चयन करता है और टेक्स्टबॉक्स में कुछ पाठ दर्ज करता है और फिर यदि वह रेडियो बटन का चयन करता है तो चेक किए गए चेकबॉक्स को अनचेक किया जाना चाहिए और टेक्स्टबॉक्स को साफ किया जाना चाहिए? मैं यह कैसे कर सकता हूं ... मैं इन सवालों को पूछता हूं क्योंकि मैं हूं? anewbie ... अग्रिम धन्यवाद ..

— svk

@vinothkumar - उस आवश्यकता को ध्यान में रखते हुए, मैंने शायद ऊपर दिए अनुसार js सेट अप नहीं किया होगा, लेकिन इस मामले में, बस जांच है कि तत्व अक्षम है और I पर $ ("# usertxtbox") val। ("") कॉल करें। होगा

— स्कॉट 10

Answer 5

मैं जानता हूं कि किसी पुराने सवाल का जवाब देना अच्छी आदत नहीं है, लेकिन मैं यह जवाब उन लोगों के लिए दे रहा हूं जो बाद में सवाल देखेंगे।

अब JQuery में राज्य को बदलने का सबसे अच्छा तरीका है

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

कृपया पूर्ण चित्रण के लिए इस लिंक को देखें। JQuery के साथ इनपुट अक्षम / सक्षम करें?

Comments

प्रति Jquery आधिकारिक वेबसाइट, प्रोप जाने का रास्ता है। +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

मैंने आपूर्ति किए गए HTML के साथ यह काम नहीं किया है, लेकिन यह काफी आसान है।

— नील्स बॉम्ब

Answer 8

पार्टी में इतनी देर होने के लिए खेद है, लेकिन मुझे यहां सुधार के लिए कुछ जगह दिखाई देती है। "अक्षम टेक्स्टबॉक्स" के विषय में नहीं, बल्कि रेडियनबॉक्स चयन और कोड सरलीकरण के लिए, बाद के बदलावों के लिए इसे थोड़ा और भविष्य का प्रमाण बना सकते हैं।

सबसे पहले, आपको .each () का उपयोग नहीं करना चाहिए और किसी विशिष्ट रेडियो बटन को इंगित करने के लिए सूचकांक का उपयोग करना चाहिए। यदि आप रेडियो बटन के एक गतिशील सेट के साथ काम करते हैं या यदि आप बाद में कुछ रेडियो बटन जोड़ते हैं या हटाते हैं, तो आपका कोड गलत बटन पर प्रतिक्रिया करेगा!

अगला, लेकिन शायद ऐसा नहीं था जब ओपी बनाया गया था, मैं क्लिक के बजाय .on ('क्लिक', फ़ंक्शन () {...}) का उपयोग करना पसंद करता हूं ... http: //api.jquery। com / पर /

कम से कम लेकिन कम से कम, यह भी कोड अधिक सरल और भविष्य का प्रमाण बनाया जा सकता है, यह नाम के आधार पर रेडियो बटन का चयन करके किया जा सकता है (लेकिन यह पहले से ही एक पोस्ट में दिखाई दिया)।

इसलिए मैं निम्नलिखित कोड के साथ समाप्त हुआ।

HTML (okw के कोड पर आधारित)

<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

MVC 4 @ Html.CheckBoxFor आमतौर पर लोग चेक पर कार्रवाई करना चाहते हैं और पीवीसी चेकबॉक्स को अनचेक करते हैं।

<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>