บังคับเลือก จำนวน 3 เชคบอค jQuery

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา บังคับเลือก จำนวน 3 เชคบอค jQuery

บังคับเลือก จำนวน 3 เชคบอค jQuery

จากบทความ jQuery กับการจำกัดการเลือก checkbox เมื่อครบจำนวนที่ต้องการแล้ว ที่เหลือจะ disable คลิกไม่ได้
แต่ที่ต้องการคือเมื่อเลือกได้ 3 เชคบอคแล้ว ถ้าไปเลือกเชคบอคที่ 4 ต่อ ให้เชคบอคที่เลือกอันลำดับ ที่ 3 หาย หรือให้เชคบอคหายไปอันใดอันหนึ่งก้ได้ครับ
ขอคำชี้แนะ ด้วยครับ
ขอบคุณครับ

Fedora 223.205.242.xxx 02-02-2014 15:02:54

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ตัวอย่าง

โค้ดทั้งหมด ดูหรือประยุกต์เพิ่มเติมจากเนื้อหา

บังคับเลือก checkbox เพียง 1 รายการ ใช้คำสั่ง prop ของ jQuery

http://www.ninenik.com/content.php?arti_id=452 via @ninenik

<!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 style="margin:auto;">
<form id="form_checkbox1" name="form_checkbox1" method="post" action="">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="2">
<thead>
  <tr>
    <th align="center" bgcolor="#CCFFCC">&nbsp;</th>
    <th bgcolor="#CCFFCC">Topic</th>
  </tr>
</thead>  
  <tr>
    <td width="50" align="center">
      <input name="data_item1" type="checkbox" class="css_data_item" id="data_item1" value="1" />
    </td>
    <td>Data1</td>
  </tr>
  <tr>
    <td width="50" align="center">
      <input name="data_item2" type="checkbox"  class="css_data_item" id="data_item2" value="2" />
    </td>
    <td>Data2</td>
  </tr>
  <tr>
    <td width="50" align="center">
      <input name="data_item3" type="checkbox" class="css_data_item"  id="data_item3" value="3" />
    </td>
    <td>Data3</td>
  </tr>
  <tr>
    <td width="50" align="center">
      <input name="data_item4" type="checkbox" class="css_data_item"  id="data_item4" value="4" />
    </td>
    <td>Data4</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td><input type="submit" name="button" id="button" value="Submit" /></td>
  </tr>      
</table>

</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">  
$(function(){        
	  
	var lastIndexObj; // สร้างตัวแปรสำหรับเก็บค่าตัวสุดท้ายที่เลือก
    $(".css_data_item").click(function(){  // เมื่อคลิก checkbox  ใดๆ  
        if($(this).prop("checked")==true){ // ตรวจสอบ property  การ ของ   
            var indexObj=$(this).index(".css_data_item"); //   เก็บค่าลำดับรายการที่เลือก
			if($(".css_data_item:checked").length==3){ // ถ้ามีการเลือกตัวที่ 3  
				lastIndexObj=indexObj; // เก็บค่าที่เลือกตัวที่ 3
			}else if($(".css_data_item:checked").length>3){ // ถ้ามีการเลือกตัวที่ 4
				$(".css_data_item").eq(lastIndexObj).prop( "checked", false );// ให้ยกเลิกการเลือกตัวที่ 3
				lastIndexObj=indexObj; // เก็บค่าตัวที่เลือกตัวที่ 4 เป็นตัวที่ 3
			}else{}
        }  
    });  

    $("#form_checkbox1").submit(function(){ // เมื่อมีการส่งข้อมูลฟอร์ม  
        if($(".css_data_item:checked").length<3){ // บังคับเลือก 3 รายการอย่างน้อย
            alert("NO");  
            return false;     
        }  
    });  	
		  
});  
</script>  

</body>
</html>

Ninenik Narkdee 124.120.165.xxx 03-02-2014

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

ขอบคุณมากครับ

fedora 223.204.92.xxx 03-02-2014 18:58

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

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

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

	Topic
	Data1
	Data2
	Data3
	Data4