我有一個複選框，如果我打勾它，我想要一個文本框成爲啓用（默認禁用），當我勾選複選框，我希望它再次被禁用。使用複選框和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

相關問題