สอบถามวิธีการ 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 171.96.245.xxx 09-08-2014 16:30:56

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

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


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


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

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


ninenik 1.47.144.xxx 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 1.47.144.xxx 09-08-2014
 ความคิดเห็นที่ 3
ขอบคุณครับ เดี๋ยวจะลองเอาไปประยุกต์ ดูครับ


wowowow 171.96.245.xxx 09-08-2014 22:44
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ