ปิดการใช้งาน textbox โดยใช้ jquery?

ฉันมีปุ่มตัวเลือกสามปุ่มที่มีชื่อเดียวกันและมีค่าต่างกันเมื่อฉันคลิกปุ่มตัวเลือกที่สามช่องทำเครื่องหมายและช่องข้อความจะถูกปิดใช้งาน แต่เมื่อฉันเลือกปุ่มตัวเลือกอื่นอีกสองปุ่มจะต้องแสดงฉันต้องการความช่วยเหลือใน 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>

HTML

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

Javascript

  $("#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"); 
        }
      });

  });

ไม่จำเป็นจริงๆ แต่การปรับปรุงโค้ดของ 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");
        });
    }
});

กระทู้นี้เก่าไปหน่อย แต่ควรอัปเดตข้อมูล

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);
    }
  });
});

ฉันไม่แน่ใจว่าทำไมโซลูชันเหล่านี้บางส่วนจึงใช้. each () - ไม่จำเป็น

นี่คือรหัสการทำงานบางส่วนที่ปิดใช้งานหากคลิกช่องที่ 3 มิฉะนั้นจะลบแอตทริบิวต์ที่ปิดใช้งาน

หมายเหตุ: ฉันได้เพิ่มรหัสในช่องทำเครื่องหมาย นอกจากนี้โปรดจำไว้ว่ารหัสจะต้องไม่ซ้ำกันในเอกสารของคุณดังนั้นให้ลบรหัสบนปุ่มวิทยุหรือทำให้ไม่ซ้ำกัน

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

ฉันรู้ว่าการตอบคำถามเก่า ๆ ไม่ใช่นิสัยที่ดี แต่ฉันจะตอบคำถามนี้ให้กับคนที่จะเห็นคำถามในภายหลัง

วิธีที่ดีที่สุดในการเปลี่ยนสถานะใน JQuery ตอนนี้คือผ่าน

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

โปรดตรวจสอบลิงค์นี้เพื่อดูภาพประกอบฉบับเต็ม ปิด / เปิดใช้งานอินพุตด้วย jQuery?

ฉันจะทำมันแตกต่างกันเล็กน้อย

 <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);           
    });
});

วิธีนี้หากคุณต้องเพิ่มปุ่มตัวเลือกเพิ่มเติมคุณไม่จำเป็นต้องกังวลเกี่ยวกับการเปลี่ยนจาวาสคริปต์

ฉันเดาว่าคุณอาจต้องการเชื่อมโยงเหตุการณ์ "คลิก" กับปุ่มตัวเลือกต่างๆอ่านค่าของปุ่มเรดิโอที่คลิกและขึ้นอยู่กับค่าปิด / เปิดใช้งานช่องทำเครื่องหมายและหรือช่องข้อความ

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
        }
    });
});

ขออภัยที่มางานปาร์ตี้ช้าไปหน่อย แต่ฉันเห็นว่ามีช่องว่างสำหรับการปรับปรุงที่นี่ ไม่เกี่ยวกับ "ปิดการใช้งาน textbox" แต่เป็นการเลือกเรดิออนบ็อกซ์และการทำให้โค้ดเข้าใจง่ายทำให้มีการพิสูจน์ในอนาคตอีกเล็กน้อยสำหรับการเปลี่ยนแปลงในภายหลัง

ก่อนอื่นคุณไม่ควรใช้. each () และใช้ดัชนีเพื่อชี้ปุ่มตัวเลือกเฉพาะ หากคุณทำงานกับชุดปุ่มแบบไดนามิกหรือถ้าคุณเพิ่มหรือลบปุ่มตัวเลือกบางปุ่มในภายหลังรหัสของคุณจะตอบสนองเมื่อกดปุ่มผิด!

ถัดไป แต่นั่นอาจไม่ใช่ในกรณีที่สร้าง OP ฉันชอบใช้. on ('click', function () {... }) แทนการคลิก ... http: //api.jquery com / บน /

Lst แต่ไม่ท้ายสุดรหัสสามารถทำให้ง่ายขึ้นและพิสูจน์ได้ในอนาคตโดยการเลือกปุ่มตัวเลือกตามชื่อ (แต่ปรากฏอยู่แล้วในโพสต์)

ดังนั้นฉันจึงลงเอยด้วยรหัสต่อไปนี้

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>

JS- รหัส

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

MVC 4 @ Html.CheckBox สำหรับคนทั่วไปต้องการดำเนินการเกี่ยวกับการทำเครื่องหมายและยกเลิกการเลือกช่องทำเครื่องหมาย mvc

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

คุณสามารถกำหนด id สำหรับการควบคุมที่คุณต้องการเปลี่ยนและใน javascript จะทำการต่อไปนี้

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

$(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">

ได้รับค่าปุ่มวิทยุและการแข่งขันกับแต่ละถ้ามันเป็น 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>