Bật/Tắt Input dựa trên lựa chọn (jQuery)

Question

<select name="state" class="select" id="state"> 
    <option value="something">Something</option> 
    <option value="other">Other</option> 
</select> 

<input type="text" name="province" class="text" id="province" /> 

jQuery

$('#state').change(function() { 
    if ($('#state Other:selected').text() == "Other"){ 
     $('#province').attr('disabled', false); 
     alert(1); 
    } else { 
     alert(2); 
    } 
}); 

Không có vẻ để làm việc. Tôi phải làm gì đó sai.

Answer 1

Bạn nên sử dụng .removeAttr('disabled') thay vì .attr('disabled', false). Ngoài ra, bạn nên cache your jQuery selectors.

Chỉnh sửa: Suy nghĩ về điều này sau khi thực tế. Bạn có thể muốn "trống" văn bản đã được nhập vào trường nếu bạn vô hiệu hóa nó, vì vậy tôi đã thêm .val(''), nếu bạn cũng muốn ẩn nó, bạn có thể thêm .hide() và .show() vào hai trường hợp.

tôi đặt lại với nhau this fiddle hiển thị phiên bản làm việc:

var $state = $('#state'), $province = $('#province'); 
$state.change(function() { 
    if ($state.val() == 'other') { 
     $province.removeAttr('disabled'); 
    } else { 
     $province.attr('disabled', 'disabled').val(''); 
    } 
}).trigger('change'); // added trigger to calculate initial state 

Các .trigger('change') sẽ "kích hoạt" một sự kiện thay đổi, hiệu quả hoạt động các chức năng một lần trong khi bạn ràng buộc nó. Bằng cách này, #province sẽ bị tắt/bật dựa trên trạng thái được chọn tại thời điểm mã được chạy. Nếu không có nó, tỉnh sẽ có sẵn ngay cả khi nhà nước không phải là "khác" trừ khi bạn cũng đã thêm disabled='disabled' vào thẻ <input> trong html của mình.

Answer 2

Bạn cần đặt "bị tắt" thành true để thực sự vô hiệu hóa điều gì đó. Ví dụ, nếu bạn muốn vô hiệu hóa trên "Khác" và cho phép trên mọi thứ khác, sau đó tôi đề nghị nói:

$('#state').change(function() { 
    $("#province").attr("disabled", $("#state").val() == "other"); 
}); 

này sử dụng $("#province").val() mà nói chung là cách ưa thích để nhận được giá trị hiện tại của các tùy chọn được lựa chọn từ một thả xuống trong jQuery. Thuộc tính "bị vô hiệu hóa" được đặt thành true nếu giá trị là "khác" và sai khác.