PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

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

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



โดย:  Anuwat Yuenyong IP: 49.49.101.xxx วันที่: 17-02-2015 เวลา: 10:59:57

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
ขอบคุณมากมากคร้าบบบบบบบบบบ

โดย:  Anuwat Yuenyong IP: 49.49.101.xxx วันที่: 17-02-2015 เวลา: 12:09:30
 ความคิดเห็นที่ 1
ประยุกต์จากบทความนี้ได้เลย 

บังคับเลือก checkbox เพียง 1 รายการ ใช้คำสั่ง prop() ของ jQuery 1.6 ขึ้นไป 
http://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 IP: 124.122.131.xxx วันที่: 17-02-2015