我有一个复选框，如果我打勾它，我想要一个文本框成为启用（默认禁用），当我勾选复选框，我希望它再次被禁用。使用复选框和jQuery禁用/启用元素？

我在这里看到jQuery Checkboxes我如何才能切换CSS类，并在这里http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_a_form_element.3F我如何使用两个按钮在启用和禁用之间切换。但是，如何通过勾选/取消勾选复选框来切换文本框禁用/启用状态？

在此先感谢。

2010-09-27 Martin

$(':checkbox').click(function(){ 
    $('input:text').attr('disabled',!this.checked) 
});

crazy demo

来源

2010-09-27 07:59:30 Reigel

我想你想的变化处理程序，即使用户单击与该复选框关联的标签，该处理程序也会触发。 – 2010-09-27 08:03:42

http://jsfiddle.net/FArMm/1/更新了Reigel的例子。 – Tim 2010-09-27 08:06:26

@Rao - 如果它是你担心的标签，请检查[疯狂演示2]（http://jsfiddle.net/FArMm/2/） – Reigel 2010-09-27 08:16:19

您可以在复选框上附加更改处理程序，并使用其checked属性启用/禁用文本字段。

$('#theCheckbox').change(function() { 
    $('#theTextfield').attr('disabled', this.checked); 
});

例子：http://jsbin.com/oludu3/2

来源

2010-09-27 07:59:10 kennytm

这里有一个网页，做你在找什么 - 这是相当小，但显示你所需要的

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script> 
     <script> 
      $(document).ready(function() { 
       $("#testcheckbox").change(function() { 
        $("#testtextfield").attr("disabled", $(this).attr("checked")); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <input type="checkbox" id="testcheckbox" /> 
     <input type="text" id="testtextfield" /> 
    </body> 
</html>

来源

2010-09-27 08:11:55 SamStephens

@马丁 - 删除变为禁用的文本框中的文本并取消选中复选框s表示被禁用 - 只需添加这行

$("#TextField_ID_name").val("");

，并取消选中该复选框，则需要指定ID名称的复选框然后加入这一行Jquery的

$("#chekcbox_ID_name").attr('checked',false)

希望这有助于有人...虽然我在回复Martins问题后2年后发布:-)

来源

2012-06-27 10:01:32 Andrews

由于jQuery 1.6，.prop()方法应该用于设置禁用和检查，而不是.attr()方法：

$('#theCheckbox').change(function() { 
    $('#theTextfield').prop('disabled', this.checked); 
});

来源

2013-12-23 11:30:07 domenu

显示和隐藏的文本框（＃otherSection2），用于当在渲染表的ASP（#CheckBoxListList）最后进入复选框其他选项：CheckBoxList控件选择

$("#CheckBoxListList input[type='checkbox']:last").on("click", function() { 

       if ($(this).is(":checked")) { 
        $("#otherSection2").show(); 
       } else { 
        $("#otherSection2").hide().find("input").val(null); 

       } 
      });

来源

2014-10-16 07:25:42

使用复选框和jQuery禁用/启用元素？

回答

crazy demo

相关问题