Cho phép hoặc tắt bỏ text input với checkbox sử dụng jquery

Tiêu đề nghe có vẻ mơ hồ một tý nhưng thực ra nó lại rất quen thuộc với chúng ta . Đơn giản là khi bạn check vô checkbox nào thì text input đó sẽ được nhập, còn không thì nó sẽ block . Demo tại đây.

Đầu tiên là include file jquery vào trong thẻ của bạn :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Tiếp theo là thêm text input và checkbox vô thẻ <body> .

<form action="" method="get">
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox"/>
<input type="text" name="test3" />
</form>

Như vậy chúng ta đã có 1 form checkbox cũng khá đơn giản rồi. Việc tiếp theo là thêm class cho checkbox để jquery biết rằng đâu là checkbox được áp dụng . Và tôi cũng thêm value cho chúng để checkbox và input nhận biết nhau ý mà

<form action="" method="get">
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />
</form>

Tiếp theo đến jquery, trước tiên chúng ta cần các tag javascript. Chúng thường đi kèm ở cuối tài liệu nên mã HTML&CSS sẽ được nạp trước javascript. Chúng tạo cảm giác là trang web được duyệt nhanh hơn :

<script type="text/javascript">
	$(document).ready(function(){
// Code của chúng ta ở đây .
	});
</script>

Hướng dẫn này chỉ hoạt động đúng khi mà các input được kích hoạt ngay khi tải trang về lần đâu tiên. Tức là tất cả các checkbox đều phải được check từ trước đó. Để làm điều này tôi dùng đoạn mã :

$(document).ready(function(){
	$('.input_control').attr('checked', true);
});

Tiếp theo là đoạn jquery bắt nó làm việc mỗi khi ai đó check vào checkbox có class ‘input_control’

$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
//Do this when someone clicks something with the class input_control
		});
	});

Bây giờ chúng ta thêm một đoạn if vào trong đó để mỗi khi có người check vào checkbox thì input text sẽ được mở ra :

$(document).ready(function(){
	$('.input_control').attr('checked', true);
	$('.input_control').click(function(){
		if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
			$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
		}else{
			$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
		}
	});
});

Như vậy là chúng ta đã hoàn thành.

JavaScript

Cho phép hoặc tắt bỏ text input với checkbox sử dụng jquery

Post a Comment

Search

Recent Comments

Subscribes

Meta