ขอความช่วยเหลือหน่อยค่ะ เกี่ยวกับการกำหนด checkbox disable

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

ขอความช่วยเหลือหน่อยค่ะ เกี่ยวกับการกำหนด checkbox disable

<html>
<head>
<title>Your title</title>
</head>
<body>
<div>
<form action="#" onsubmit="return false;">
<div>
<label>Item 1 <input type="checkbox" id="ch1" namevalue="" onclick="if (this.checked) document.getElementById('ch4').disabled=true; else document.getElementById('ch4').disabled = false;"  /></label><br />
<label>Item 2 <input type="checkbox" id="ch1"  value="" onclick="if (this.checked) document.getElementById('ch4').disabled=true; else document.getElementById('ch4').disabled = false;" /></label>
<br>
<label>Item 3 <input type="checkbox" id="ch1" value="" onclick="if (this.checked) document.getElementById('ch4').disabled=true; else document.getElementById('ch4').disabled = false;" /></label>
<label><br>
Item 4 
<input type="checkbox" id="ch4"  value="" onclick="if (this.checked) document.getElementById('ch1').disabled=true; else document.getElementById('ch1').disabled = false;
" /></label>
</div>
</form>
</div>
</body>
</html>

อยากให้เมื่อคลิก checkbox ของ item4 แล้ว chechboxของitem1,item2,item3 ให้ disable ไปค่ะ
แต่จากโค้ดไม่รู้ว่าผิดส่วนไหน เพราะเมื่อติ๊ก checkbox ของ item4 แล้ว จะ disable แค่ item1 ค่ะ

รบกวนด้วยนะคะ

Apatsaraare 06-08-2015 15:26:11

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ลองเปลี่ยนมาใช้ jquery ดู จะทำให้ javascript เป็นเรื่องง่าย อีกอย่างโค้ดไม่รกด้วย

อีกอย่างดูเรื่อง id กับ class กับ name
ปกติกำหนด id จะเป็นการระบุเฉพาะแต่ละตัว จะไม่กำหนดซ้ำ เช่น มี id="chk1" ก็ควรจะมีแค่อันเดียว
class นอกจากจะใช้กำหนด รูปแบบ style css แล้ว ใน jquery เราเอาไว้อ้างอิงตัวที่ต้องการได้ ใช้กับรายการที่เป็นกลุ่ม
และเราต้องการจัดการหรือใช้งานพร้อมๆ กัน
ส่วน name ปกติจะต้องมีค่านี้ ถ้าจะใช้กับพวก php หรือนำข้อมูลไปใช้งาน เพราะจะเป็นตัวแปรที่จะถูกส่งไปพร้อมข้อมูล

ตัวอย่าง

ดูโค้ดต่อไปนี้เป็นแนวทาง

<div>
  <form action="#" onSubmit="return false;">
    <div>
      <label>Item 1
        <input type="checkbox"  class="css_chk" name="ch1" value=""  />
      </label>
      <br />
      <label>Item 2
        <input type="checkbox" class="css_chk"  name="ch2"  value=""  />
      </label>
      <br>
      <label>Item 3
        <input type="checkbox" class="css_chk"  name="ch3" value=""  />
      </label>
      <label><br>
        Item 4
        <input type="checkbox" class="css_chk"  name="ch4"  value=""  />
      </label>
    </div>
  </form>
</div>
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
$(function(){
    // ถ้าตัวที่มี class ชื่อ css_chk ตัวที่ 4 (base เริ่มต้นที่ 0) ถูกคลิก
   $(".css_chk:eq(3)").on("click",function(e){
       var i_check=$(this).prop("checked"); // เก็บค่าที่ถูกคลิกเป็น true หรือ false
       // แล้วให้คัาที่มี class ชื่อ css_chk ตัวที่ไม่ใช่ตัวที่ 4 ก็คือ น้อยกว่า 3 ให้ disabled ตามค่าตัวแปร
       $(".css_chk:lt(3)").prop("disabled",i_check); // ถ้าเลือกก็ true หรือก็คือ disabled 
   });
});  
</script>

ninenik 06-08-2015

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

ขอบคุณมากนะคะ แต่ในเวลาเดียวกันถ้าเราติ๊ก item1,item2,item3 อันใดอันหนึ่ง item4 ก็จะ disible แบบเคลียร์ค่า,,ติ๊กถูก,,ออกจาก item1,item2,item3 ได้ยังไงคะ? เพราะหนูได้กำหนด value ไว้ในแต่ละ checkbox ค่ะ เพื่อเก็บค่าบวกเพิ่มไปเรื่อยๆตามที่ได้คลิก ลงtextbox เพื่อเก็บลง database ด้วยค่ะ เนื่องจาก item4 จะต้องเป็นตัวเดียวที่โดนคลิก ไม่สามารถติ๊กอันอื่นเพิ่มได้ ในขณะเดียวกัน หากคลิก item1,item2,item3 อันใดอันนึง ก็จะไม่สามารถติ๊ก item4ได้ค่ะ T__T รบกวนอีกครั้งนะคะ

apatsaraare 06-08-2015 19:13

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

แบบง่ายๆ ให้เห็นรูปแบบการทำงานก็น่าจะประมาณนี้

<script type="text/javascript">  
$(function(){  
    // ถ้าตัวที่มี class ชื่อ css_chk ตัวที่ 4 (base เริ่มต้นที่ 0) ถูกคลิก  
   $(".css_chk:eq(3)").on("click",function(e){  
       var i_check=$(this).prop("checked"); // เก็บค่าที่ถูกคลิกเป็น true หรือ false  
       $(".css_chk:lt(3)").prop("disabled",i_check); // ถ้าเลือกก็ true หรือก็คือ disabled   
       $(".css_chk:lt(3)").prop("checked",false); // ยกเลิกการเลือก
   });  
    
    // ถ้าตัวที่มี class ชื่อ css_chk ที่ไม่ใช้ตัวที่ 4 (base เริ่มต้นที่ 0) ถูกคลิก  
   $(".css_chk:lt(3)").on("click",function(e){  
       $(".css_chk:eq(3)").prop("disabled",true); // ให้ disabled ตัวที่ 4
       $(".css_chk:eq(3)").prop("checked",false); // ให้ ยกเลิกการเลือกตัวที่ 4
       if($(".css_chk:lt(3):checked").length==0){ // ถ้าตัวที่ไม่ใช่ตัวที่ 4 ไม่ถูกเลือกเลย
           $(".css_chk:eq(3)").prop("disabled",false); // ยกลิกการ disabled ตัวที่ 4
       }       
   });      
    
});    
</script>

ใน jquery คำว่า lt ก็คือ less than น้อยกว่า lt(3) ก็คือน้อยกว่าตัวที่ 4 ก็คือตัวที่ 1-3 (base เริ่มต้นที่ 0)
eq ก็คือ equal เท่ากับ eq(3) ก็คือ เท่ากับตัวที่ index เท่ากับตัวที่ 3 หรือก็คือตัวที่ 4 ในการนับแบบปกติ
$(".css_chk:lt(3):checked").length อันนี้ก็คือ นับว่าตัวที่ไ่ม่ใช่ตัวที่สี่ ที่ถูกเลือก มีกี่ตัว

ninenik 06-08-2015

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

ได้แล้วววววววววววค่ะ ขอบคุณมาก ๆ นะคะ ^^ เยี่ยมเลยย

apatsaraare 07-08-2015 12:59

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

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

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