PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

สอบถาม Even ระหว่าง Checkbox กับ Radio ทีครับ
<html>
<head>
<title>Disable Radio Button in Form Using jQuery</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here -->
<script src="js/jquery-1.6.min.js" type="text/javascript"></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 input:checkbox").change(function() {
if ($(this).val() == "Disable") {
$(".second").attr('checked', false);
$(".second").attr('disabled', true);
}
// Else Enable radio buttons.
else {
$(".second").attr('disabled', false);
}
});
});
 
</script>
 
 
 
<script src="js/jquery-1.6.min.js" type="text/javascript"></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 input:checkbox").change(function() {
if ($(this).val() == "Disable") {
$(".second2").attr('checked', false);
$(".second2").attr('disabled', true);
}
// Else Enable radio buttons.
else {
$(".second2").attr('disabled', false);
}
});
});
 
</script>
 
 
 
 
</head>
<body>
 
 
 
 
 
 
 
<div class="container">
<div class="main">
<h2>Disable Radio Button in Form Using jQuery</h2>
<form action="#" method="post" id="form">
 
 
<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="form">
 
 
<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>
</body>
</html>



ผมต้องการเลือก checkbox แรกแล้ว ให้  effect จาง optical แค่ radio button ที่ผมอยากจะไห้ครับ  

และเมื่อ checkbox 2 ไห้ effect มันจาง ที่ อันล่าง  คือของไคร ของมันอะครับ

 

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

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

  



โดย:  Hanakobz112 IP: 27.55.35.xxx วันที่: 04-09-2014 เวลา: 16:34:03

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

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


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


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

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

 

 

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

 

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



โดย:  Hanakobz112 IP: 119.46.21.xxx วันที่: 05-09-2014 เวลา: 13:22:06
 ความคิดเห็นที่ 5
แสดงว่ายังไม่เข้าใจ การใช้งาน form .ใน html

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

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

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

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

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

Disable Radio Button in Form Using jQuery

Disable

Radio 1 Radio 2 Radio 3

Disable

Radio 1 Radio 2 Radio 3



โค้ด

<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>


โดย:  Ninenik IP: 124.120.56.xxx วันที่: 05-09-2014
 ความคิดเห็นที่ 4

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

 

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



โดย:  Hanakobz112 IP: 119.46.21.xxx วันที่: 05-09-2014 เวลา: 09:53:55
 ความคิดเห็นที่ 3

และถ้าผมต้องการไห้ส่งค่าไปบันทึกอีกหน้าอะครับ พี่  

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


 




เพราะมันจะบันทึกแต่ ที่อยู่ใน ฟอร์มของ submit


ผมเขียนซ้อน ฟอร์ม ไปแล้ว ไม่ได้ พี่นิกมีวิธีไหนแนะนำบ้างครับ



 
<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>
             <input type="radio" name="second" class="second" value="Radio 4">
        </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 align="center">
  <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>
</div>
<form name="form3" method="post" action="j.php">
  <div align="center">
    <input type="submit" name="button" id="button" value="Complete">
  </div>
</form>




 


โดย:  Hanakobz112 IP: 27.55.46.xxx วันที่: 05-09-2014 เวลา: 09:25:54
 ความคิดเห็นที่ 2

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



โดย:  Hanakobz112 IP: 119.46.21.xxx วันที่: 05-09-2014 เวลา: 08:33:26
 ความคิดเห็นที่ 1
กำหนด 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>



Disable Radio Button in Form Using jQuery

Disable

Radio 1 Radio 2 Radio 3

Disable

Radio 1 Radio 2 Radio 3




โดย:  Ninenik IP: 124.120.171.xxx วันที่: 04-09-2014