ปุ่ม
ปุ่มต่างๆนั้นง่ายต่อการปิดการใช้งานเนื่องจากdisabledคุณสมบัติของปุ่มที่จัดการโดยเบราว์เซอร์:
<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>
หากต้องการปิดการใช้งานด้วยฟังก์ชัน jQuery ที่กำหนดเองคุณเพียงแค่ใช้ประโยชน์จากfn.extend():
// Disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
this.disabled = state;
});
}
});
// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);
// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);
JSFiddle ปุ่มพิการและการสาธิตการป้อนข้อมูล
มิฉะนั้นคุณจะใช้prop()วิธีการของ jQuery :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
แท็ก Anchor
เป็นที่น่าสังเกตว่าdisabledไม่ใช่คุณสมบัติที่ถูกต้องสำหรับจุดยึดแท็ก ด้วยเหตุผลนี้ Bootstrap ใช้สไตล์ต่อไปนี้กับ.btnองค์ประกอบ:
.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #333;
background-color: #E6E6E6;
}
โปรดสังเกตว่า[disabled]คุณสมบัติถูกกำหนดเป้าหมายเช่นเดียวกับ.disabledคลาส .disabledระดับคือสิ่งที่เป็นสิ่งจำเป็นที่จะทำให้แท็กสมอปรากฏพิการ
<a href="http://example.com" class="btn">My Link</a>
แน่นอนว่าสิ่งนี้จะไม่ป้องกันลิงก์จากการทำงานเมื่อคลิก การเชื่อมโยงดังกล่าวจะพาเราไปhttp://example.com เพื่อป้องกันสิ่งนี้เราสามารถเพิ่ม jQuery code ในชิ้นส่วนง่ายๆเพื่อกำหนดเป้าหมายของแท็กจุดยึดกับdisabledคลาสที่จะเรียกevent.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
เราสามารถสลับdisabledชั้นได้โดยใช้toggleClass():
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
$this.toggleClass('disabled', state);
});
}
});
// Disabled with:
$('a').disable(true);
// Enabled with:
$('a').disable(false);
JSFiddle สาธิตการเชื่อมโยงคนพิการ
รวม
is()จากนั้นเราจะสามารถขยายก่อนหน้านี้ฟังก์ชั่นปิดการใช้งานดังกล่าวข้างต้นทำให้การตรวจสอบชนิดขององค์ประกอบที่เรากำลังพยายามที่จะปิดการใช้งานโดยใช้ วิธีนี้เราสามารถทำได้toggleClass()ถ้าไม่ใช่inputหรือbuttonองค์ประกอบหรือสลับdisabledคุณสมบัติถ้ามันเป็น:
// Extended disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
if($this.is('input, button, textarea, select'))
this.disabled = state;
else
$this.toggleClass('disabled', state);
});
}
});
// Disabled on all:
$('input, button, a').disable(true);
// Enabled on all:
$('input, button, a').disable(false);
เต็มสาธิต JSFiddle รวม
มันน่าสังเกตว่าฟังก์ชั่นด้านบนจะทำงานกับอินพุตทุกประเภทด้วยเช่นกัน
