สอบถาม Even ระหว่าง Checkbox กับ Radio ทีครับ

 

 แต่เดิมโค้ตนี้ พอกดที่ check box radio กลับ effect optical ทั้งหน้า

ขอบคุนนพี่ ๆ ครับบผม 

  

กำหนด id ของ form เป็น form1 กับ form2

   <div class="container">
 
<div class="main">
    <h2>Disable Radio Button in Form Using jQuery</h2>
    <form action="#" method="post" id="form1">


        <input type="checkbox" name="first" value="Disable" id="checkbox1">

        <span>Disable</span>
        <label>Radio Buttons :</label>
        <p>
            <input type="radio" name="second" class="second" value="Radio 1">
            <span>Radio 1</span>
            <input type="radio" name="second" class="second" value="Radio 2">
            <span>Radio 2</span>
            <input type="radio" name="second" class="second" value="Radio 3">
            <span>Radio 3</span>
        </p>
        <p>

        </p>
    </form>

    <form action="#" method="post" id="form2">


        <input type="checkbox" name="first" value="Disable" id="checkbox2">

        <span>Disable</span>
        <label>Radio Buttons :</label>
        <p>
            <input type="radio" name="second" class="second2" value="Radio 1">
            <span>Radio 1</span>
            <input type="radio" name="second" class="second2" value="Radio 2">
            <span>Radio 2</span>
            <input type="radio" name="second" class="second2" value="Radio 3">
            <span>Radio 3</span>
        </p>
        <p>

        </p>
    </form>



</div>   
   
   
    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
 

<script type="text/javascript">
    $(document).ready(function () {
        // By Default Disable radio button
        $(".first").attr('disabled', true);
        // Disable radio buttons function on Check Disable radio button.
        $("form#form1 input:checkbox").change(function () {
            if ($(this).prop("checked") == true) {
                $(".second").attr('checked', false);
                $(".second").attr('disabled', true);
            }
            // Else Enable radio buttons.
            else {
                $(".second").attr('disabled', false);
            }
        });
    });
</script>




<script type="text/javascript">
    $(document).ready(function () {
        // By Default Disable radio button
        $(".first").attr('disabled', true);
        // Disable radio buttons function on Check Disable radio button.
        $("form#form2 input:checkbox").change(function () {
            if ($(this).prop("checked") == true) {
                $(".second2").attr('checked', false);
                $(".second2").attr('disabled', true);
            }
            // Else Enable radio buttons.
            else {
                $(".second2").attr('disabled', false);
            }
        });
    });
</script>

ขอบบบบพี่ นายนิก มากค้าบบบบบบบ

(บันทึกจากค่า Value  ของ Radio Button  การทำแบบสอบถาม)


 

เหมือนกับว่า ปุ่มบันทึกอยู่ที่ ฟอร์ม 11 แล้ว ข้อมูลที่ต้องการบันทึกอยู่ที่ Form 1-10

 

แบบนี้ครับบ T^T

แสดงว่ายังไม่เข้าใจ การใช้งาน form .ใน html

การส่งค่าข้อมูลไปบันทึกจาก form โดยทั่วไป เขาจะใช้แค่ form เดียว

พอส่งข้อมูล ก็จะเป็นชุดของข้อมูลชุดเดียวไปบันทึก

ดังนั้นการใช้การ checked และ disabled ในตัวอย่างที่แนะนำก็เป็นการใช้งานที่ไม่ถูกวิธี

ถ้าจะแก้ ก็ต้องไปวางรูปแบบฟอร์มให้ถูกต้องก่อน แล้ว จึงจะให้แนวทางโค้ดได้

ตัวอย่างการใช้ form เดียวพร้อมปุ่ม submit



โค้ด

<div class="main">
    <h2>Disable Radio Button in Form Using jQuery</h2>
    <form action="#" method="post" id="form1">


        <input type="checkbox" name="first" value="Disable" onclick="setCheck(this,'second');" id="checkbox1">

        <span>Disable</span>
        <label>Radio Buttons :</label>
        <p>
            <input type="radio" name="second" class="second" value="Radio 1">
            <span>Radio 1</span>
            <input type="radio" name="second" class="second" value="Radio 2">
            <span>Radio 2</span>
            <input type="radio" name="second" class="second" value="Radio 3">
            <span>Radio 3</span>
        </p>
        <p>

        </p>



        <input type="checkbox" name="first" value="Disable" onclick="setCheck(this,'second2');" id="checkbox2">

        <span>Disable</span>
        <label>Radio Buttons :</label>
        <p>
            <input type="radio" name="second" class="second2" value="Radio 1">
            <span>Radio 1</span>
            <input type="radio" name="second" class="second2" value="Radio 2">
            <span>Radio 2</span>
            <input type="radio" name="second" class="second2" value="Radio 3">
            <span>Radio 3</span>
        </p>
        <p>

        </p>
        <button type="submit">Submit</button>
    </form>



</div>   
   
   

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  

<script type="text/javascript">
    $(document).ready(function () {
        

        
    });
    var setCheck = function(chkObj,cssObj){
        var i_check=$(chkObj).prop("checked");
        if(i_check==true){
            $("."+cssObj).prop("checked",false).attr('disabled', true);
        }else{
            $("."+cssObj).attr('disabled', false);
        }
    };    
</script>

T^T ไช่แล้วครับ พี่

 

 

แบบนี้ ผม จะเพิ่ม Radio หรือ Checkbox ไปกี่ชุด ก้อ แค่เปลี่ยน class เท่านั้น ไช่ไหม ครับบ

 

ขอบคุนคร้าบบบ