สอบถามวิธีการ disabled select option ด้วย jQuery

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามวิธีการ disabled select option ด้วย jQuery

สอบถามวิธีการ disabled select option ด้วย jQuery

ผมทำฟอร์ม ให้ เลือ หมวดหมู่ แล้ว สามารถเพิ่ม ได้ มากกว่า กว่า หนึ่ง โดยทำ เป็น select option ไว้ แล้ว เพิ่มแถวด้วย jquery แล้ว อยากให้ มีการ disabled
ช่อง ที่ เคยเลือไปแล้ว นะครับ ว่ามีวิธีการอย่างไร

โค้ด select option ที่ผมทำไว้

<script type="text/javascript">

   $(document).ready(function() {
	$("#AddMoreCateory").click(function() { 
           if($(".form-group").size() < 7) {
		$("#CategoryWrapper").append(
	           '<div class="form-group">'+
		   '<div class="input-group">'+
		   '<select class="form-control" name="cateory[]" >'+
		   '<option value="">-- โปรดเลือก --</option>'+
		   '<option value="1">หมวดหมู่1</option>'+
		   '<option value="2">หมวดหมู่2</option>'+
		   '<option value="3">หมวดหมู่3</option>'+
		   '<option value="4">หมวดหมู่4</option>'+
		   '<option value="5">หมวดหมู่5</option>'+
		   '<option value="6">หมวดหมู่6</option>'+
		   '<option value="7">หมวดหมู่7</option>'+
		   '</select>'+
		   '<div class="RemoveCateory input-group-addon"> - </div>'+
		   '<input type="hidden" name="h_item_id[]" value="">'+
		   '</div>'+
		   '</div>'
		);
	}
});

$("#CategoryWrapper").on("click",".RemoveCateory", function(){ 
if( $(".form-group").size() > 1 ) {
	$(this).parents('.form-group').remove(); 
}
return false;
});
});
</script>

<div class="row">
		<label class="col-md-1" for="cateory">หมวดหมู่<span style="color: red;">*</span></label>
		<div id="CategoryWrapper" class="col-md-4">
			<div class="form-group">
				<div class="input-group">
					<select class="form-control" name="cateory[]" >
						<option value="">-- โปรดเลือก --</option>
						<option value="1">หมวดหมู่1</option>
						<option value="2">หมวดหมู่2</option>
						<option value="3">หมวดหมู่3</option>
						<option value="4">หมวดหมู่4</option>
						<option value="5">หมวดหมู่5</option>
						<option value="6">หมวดหมู่6</option>
						<option value="7">หมวดหมู่7</option>
					</select>
					<div id="AddMoreCateory" class="input-group-addon"> + </div>
					<input type="hidden" name="h_item_id[]" value="">
				</div>
			</div>			
		</div>
	</div>

Wowowow 09-08-2014 16:30:56

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

เท่าที่ดู การเลือกแบบนี้ ถ้าสามารถแก้ไขได้ ก็จะไม่มีทางสิ้นสุดเงื่อนไขง่ายๆ
ถ้าเป็นไอเดีย
1. ก่อนเพิ่มลิสรายการ ใหม่ ลิสรายการแรกต้องถูกเลือกก่อน พอเลือกแล้ว จะไม่สามารถแก้ไขได้
2. เมื่อกดเพิ่มลิสรายการใหม่ option ลิสรายการที่สอง ต้องตัด option ที่เลือกแล้ว ออก พอเลือกแล้ว จะไม่สามารถแก้ไขได้
3. หากมีการลบ ลิสรายการที่เพิ่มมาใหม่ออก option ของลิสรายการที่ถูกลบ ต้องสามารถเอามาใช้ได้ ถ้ามีการเพิ่มลิสรายการใหม่อีกครั้ง

ninenik 09-08-2014

ความคิดเห็นที่ 2

โค้ดและตัวอย่างเป็นแนวทาง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>

</head>

<body>


<div class="row">
		<label class="col-md-1" for="cateory">หมวดหมู่<span style="color: red;">*</span></label>
		<div id="CategoryWrapper" class="col-md-4">
			<div class="form-group">
				<div class="input-group">
					<select class="form-control" name="cateory[]" >
						<option value="">-- โปรดเลือก --</option>
						<option value="1">หมวดหมู่1</option>
						<option value="2">หมวดหมู่2</option>
						<option value="3">หมวดหมู่3</option>
						<option value="4">หมวดหมู่4</option>
						<option value="5">หมวดหมู่5</option>
						<option value="6">หมวดหมู่6</option>
						<option value="7">หมวดหมู่7</option>
					</select>
					<div id="AddMoreCateory" class="input-group-addon"> + </div>
					<input type="hidden" name="h_item_id[]" value="">
				</div>
			</div>			
		</div>
	</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	
});
</script>

<script type="text/javascript">
$(document).ready(function() {
	
		var showlistOption="";
		var mylistOption=[];	
		mylistOption[0]="<option value=\"1\">หมวดหมู่1</option>";
		mylistOption[1]="<option value=\"2\">หมวดหมู่2</option>";
		mylistOption[2]="<option value=\"3\">หมวดหมู่3</option>";
		mylistOption[3]="<option value=\"4\">หมวดหมู่4</option>";
		mylistOption[4]="<option value=\"5\">หมวดหมู่5</option>";
		mylistOption[5]="<option value=\"6\">หมวดหมู่6</option>";
		mylistOption[6]="<option value=\"7\">หมวดหมู่7</option>";
		

		var uselistOption=[];	
		
		showlistOption = function(mylistOption,uselistOption){
			if(uselistOption.length==0){
				return mylistOption.join("");
			}else{
				var returnOption="";
				for(i=0;i<mylistOption.length;i  ){
					var tempI=i+1;
					if(uselistOption.indexOf(tempI.toString())>-1){
						
					}else{
						returnOption+=mylistOption[i];
					}
				}
				return returnOption;
			}
		}		
	
		$("#AddMoreCateory").click(function() { 
			if($(".form-group").size() < 7) {
				var has_noSelected=0;
				$(".form-control").each(function(i,k){
					if($(".form-control").eq(i).val()==""){
						has_noSelected++;
					}
				});				
				if(has_noSelected==0){
					$("#CategoryWrapper").append(
						'<div class="form-group">'+
						'<div class="input-group">'+
						'<select class="form-control" name="cateory[]" >'+
						'<option value="">-- โปรดเลือก --</option>'+
						showlistOption(mylistOption,uselistOption)+
						'</select>'+
						'<div class="RemoveCateory input-group-addon"> - </div>'+
						'<input type="hidden" name="h_item_id[]" value="">'+
						'</div>'+
						'</div>'
					);
				}else{
					alert("โปรดเลือกรายการ");
				}
			}
		});
	
	$(document).on("change",".form-control",function(){
		var keyObj=$(".form-control").index(this);
		var valObj=$(this).val();
		uselistOption[keyObj]=valObj;
		if(valObj!=""){
			$(".form-control option").not(":selected").remove();
		}
		console.log(uselistOption);
		$(".form-control").each(function(i,k){
			if($(".form-control").eq(i).val()==uselistOption[i]){
				
			}else{
			
			}
		});

	});

	$("#CategoryWrapper").on("click",".RemoveCateory", function(){ 
		if( $(".form-group").size() > 1 ) {	
			$(this).parents('.form-group').remove(); 
			uselistOption=[];	
			$(".form-control").each(function(i,k){
				uselistOption[i]=$(".form-control").eq(i).val();				
			});					
		}
		return false;
	});
});
</script>
</body>
</html>

ตัวอย่าง

หมวดหมู่*

ninenik 09-08-2014

ความคิดเห็นที่ 3

ขอบคุณครับ เดี๋ยวจะลองเอาไปประยุกต์ ดูครับ

wowowow 09-08-2014 22:44

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน