บังคับเลือก checkbox เพียง 3 รายการใช้คำสั่งPro() ของ jquery 1.6 ขึ้นไป

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา บังคับเลือก checkbox เพียง 3 รายการใช้คำสั่งPro() ของ jquery 1.6 ขึ้นไป

บังคับเลือก checkbox เพียง 3 รายการใช้คำสั่งPro() ของ jquery 1.6 ขึ้นไป

พี่ครับพอดีผมกำลังทำโปรเจคเลยอยากถามน่ะครับในการที่จะให้มีการบังคับเลือก checkbox เพียงแค่ 3 รายการ ใช้คำสั่ง prop() ของ jQuery 1.6 ขึ้นไปแล้วพอกด submit แล้วส่งค่าไปยังหน้าแผนที่สักหน้านึงพี่พอมีตัวอย่างไหมครับ

Anuwat Yuenyong 17-02-2015 10:59:57

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ประยุกต์จากบทความนี้ได้เลย

บังคับเลือก checkbox เพียง 1 รายการ ใช้คำสั่ง prop() ของ jQuery 1.6 ขึ้นไป

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

	Topic
	Data1
	Data2
	Data3
	Data4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div style="margin:auto;width:500px;">  
<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(){          
        
    $(".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){
            $(".css_data_item").not(":eq("+indexObj+")").prop( "checked", false ); // ยกเลิกการคลิก รายการอื่น
            }
        }    
    });    
  
    $("#form_checkbox1").submit(function(){ // เมื่อมีการส่งข้อมูลฟอร์ม    
        if($(".css_data_item:checked").length<3){ // ถ้าไม่มีการเลือก checkbox ใดๆ เลย    
            alert("เลือกอย่างน้อย 3 รายการ");    
            return false;       
        }    
    });       
            
});    
</script>        
            
</body>
</html>

ninenik 17-02-2015

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

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

anuwat yuenyong 17-02-2015 12:09

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

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

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