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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถาม 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 27.55.35.xxx 04-09-2014 16:34:03

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

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


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


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

 ความคิดเห็นที่ 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 124.120.171.xxx 04-09-2014
 ความคิดเห็นที่ 2

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



hanakobz112 119.46.21.xxx 05-09-2014 08:33
 ความคิดเห็นที่ 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 27.55.46.xxx 05-09-2014 09:25
 ความคิดเห็นที่ 4

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

 

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



hanakobz112 119.46.21.xxx 05-09-2014 09:53
 ความคิดเห็นที่ 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 124.120.56.xxx 05-09-2014
1 2 Next






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ