2010-03-07 27 views
42

Tôi có một hàng trong bảng có chứa hộp kiểm và một số trường biểu mẫu khác (hộp văn bản, trường ẩn, danh sách chọn). Khi hộp kiểm được chọn, tôi muốn vô hiệu hóa tất cả các trường biểu mẫu trong hàng đó ngoại trừ các trường ẩn. Tôi có điều này làm việc cho hầu hết các phần, nhưng tôi dường như không thể bỏ qua các lĩnh vực ẩn.JQuery Chọn trường nhập ngoại trừ Ẩn

Cách tốt nhất để chọn tất cả các trường biểu mẫu trong hàng của bảng nhưng bỏ qua các trường ẩn trong lựa chọn là gì?

Trả lời

1

.........

$('tr input').attr('disabled', true) 
$('tr input[type="hidden"]').removeAttr('disabled') 
38

Giả sử bằng cách "ẩn" bạn có nghĩa là type="hidden" ví dụ:

<input type="hidden" name="foo" value="bar"> 

sau đó bạn có thể sử dụng attribute not equals selector để làm điều này:

$("tr input:checkbox").click(function() { 
    var cb = $(this); 
    var tr = $(this).closest("tr"); 
    if (cb.val()) { 
    tr.find("input[type!='hidden']").attr("disabled", true); 
    } else { 
    tr.find("input[type!='hidden']").removeAttr("disabled"); 
    } 
}); 

Lời khuyên chung của tôi là tránh bộ chọn thuộc tính. Chúng chậm. Cung cấp cho các đầu vào có liên quan (hoặc những người ẩn hoặc những người không ẩn) một lớp và sau đó sử dụng nó trong bộ chọn.

Tuy nhiên, nếu bạn có ý nghĩa "ẩn" như trong "không nhìn thấy" sau đó sử dụng :visible selector:

$("tr input:checkbox").click(function() { 
    var cb = $(this); 
    var tr = $(this).closest("tr"); 
    if (cb.val()) { 
    tr.find("input:visible").attr("disabled", true); 
    } else { 
    tr.find("input:visible").removeAttr("disabled"); 
    } 
}); 
+0

@Cletus Bạn nghĩ rằng một bộ lọc() gọi với một hàm kiểm tra xem "this.type" là "ẩn" sẽ nhanh hơn so với các thuộc tính trong chọn kiểm tra? – Pointy

+0

Ahhh, thậm chí không bao giờ nghĩ đến việc gắn thẻ chúng với một lớp học. Tốt đẹp! – Bob

+0

@cletus - Mẹo tuyệt vời khi sử dụng các lớp học. Chỉ cần làm cho cuộc sống của tôi đáng giá. –

0

Trước tiên, bạn cần gắn thẻ "chọn" của bạn hộp kiểm (ví dụ với một thuộc tính lớp "selector) . để nó là rõ ràng rằng nó được sử dụng để kiểm tra thay vì yếu tố hình thức bình thường Sau đó, bạn sử dụng này:

$('table :checkbox.selector').click(function(ev) { 
    $(ev.currentTarget) 
      .parents('td').siblings('td') 
      .find(':input:not([type=hidden])') 
      .attr('disabled', ev.currentTarget.checked); 
}); 

giải pháp này làm việc cho tất cả các đầu vào (. ví dụ như chọn danh sách, textareas) và nó sẽ không tắt tự chọn hộp kiểm.

Tôi giả sử bạn sử dụng jQuery mới nhất.

19

Bạn cũng có thể giải quyết việc này bằng cách sử dụng bộ chọn ẩn

$("input:not(:hidden)")

Xem thêm: jQuery hidden selector

0

Tôi tìm thấy một cách đơn giản để làm điều này trong jquery.

$("tr input").not("input[type='hidden']") 

Trong đoạn mã dưới đây, có một div với id của tabsDiv có chứa nhiều thành phần html và mã này được tất cả các yếu tố đầu vào bên trong div này, ngoại trừ những người có loại hidden.

$("#tabsDiv").find("input").not("input[type='hidden']") 
0

Chỉ cần thêm bộ lọc hiển thị có nghĩa là nó sẽ chỉ lấy phần tử đầu vào hiển thị cho người dùng.
Điều này làm việc cho tôi Tôi đang thêm mô tả cho 30 char.

$ ("đầu vào: có thể nhìn thấy")

Các vấn đề liên quan