ปิด textbox เพื่อให้ไม่สามารถแก้ไขข้อมูลได้ด้วย radio button

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

benzas00123
PHP Super Member
PHP Super Member
Posts: 244
Joined: 06/01/2020 9:58 am

ปิด textbox เพื่อให้ไม่สามารถแก้ไขข้อมูลได้ด้วย radio button

Post by benzas00123 »

radio button เป็น ปุ่มที่เอาไว้ให้ user เลือกตัวเลือกอย่างใดอย่างหนึ่งเท่านั้นไม่สามารถเลือกหลายๆอย่างได้ ซึ่งจะแตกต่างจาก checkbox ที่เราจะสามารถเลือกติ๊กหลายช่องได้
โดยวันนี้เราจะมาลองเขียนให้เมื่อเราเลือก radio button ที่เราต้องการแล้วมันจะไปปิดช่อง textbox ที่เรากำหนดเพื่อไม่ให้ user สามารถแก้ไขข้อมูลได้ ตัวอย่างดังนี้

code html

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <meta charset="UTF-8">
    <title>Title</title>
    <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../static/css/bootstrap.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../static/js/bootstrap.js"></script>






</head>
<body>

                           <div class="row">
                                    <div class="col-md-4" >
                                        <label class="control-label"><b>ปรับขนาดของรูป :  </b>
                                        &ensp;<input id="rati0" value="1" type="radio" onclick="fnc_free(1)" name="radio" ><span class="checkmark"></span>
                                        </label>
                                    </div>

                                    <div class="col-md-3"><br><br>
                                        <input type="number" required="" id="w1" name="weight" autocomplete="off" placeholder="กว้าง (weight)" class="form-control" value="{{s[0]}}"  multiple readonly>
                                    </div>

                                    <div class="col-md-3 col-md-offset-4"><br>
                                        <input type="number" required="" id="h1" name="height" autocomplete="off" placeholder="สูง (height)" class="form-control" value="{{s[1]}}" multiple readonly>
                                    </div>
                           </div>
                           <div class="row">
                                    <div class="col-md-4"><br>
                                        <label class="control-label"><b>ปรับขนาดเป็น %:  </b></label>
                                        &ensp;<input id="rati2" value="2" type="radio"  onclick="fnc_free(2)" name="radio"><span class="checkmark"></span>
                                    </div>
                                    <div class="col-md-3"><br>
                                        <input id="p1" type="number" min="1" max="100" required="" name="percent" autocomplete="off"  placeholder="ใส่ตัวเลข 1-100" class="form-control" value="100" multiple readonly>
                                    </div>
                           </div>


</body>
</html>
รูปตัวอย่าง
HTML CSS-1.png
HTML CSS-1.png (12.48 KiB) Viewed 579 times
จะเห็นได้ว่าช่องทุกช่องนั้นปิดอยู่ด้วย readonly เราจะสามารถตั้งให้เปิดได้เมื่อทำการคลิกที่ ช่อง radio ที่เราต้องการด้วย คำสั่งดังนี้

Code: Select all

<SCRIPT >
function fnc_free($data){
			if ($data=="1"){
				document.getElementById("w1").readOnly=false;
				document.getElementById("h1").readOnly=false;
				document.getElementById("p1").readOnly=true;
			}else if ($data=="2"){
				document.getElementById("w1").readOnly=true;
				document.getElementById("h1").readOnly=true;
				document.getElementById("p1").readOnly=false;
			}
		}
</script>
คำอธิบาย code คือ เมื่อเราทำการ คลิกช่อง radio 1 จะมีค่าเป็น 1 แล้วจะนำค่านั้นเข้ามาในฟังก์ชั่นแรก เพื่อที่จะทำการเปิดช่อง w1 และ h1 ให้สามารถแก้ไขได้ และทำการปิดช่อง p1 ไว้ แต่เมื่อทำการคลิก radio 2 เราจะฟังก์ชั่น 2 แทนคือทำการปิดช่อง w1 และ h1 และทำการเปิด p1 แทน

ผลลัพธ์
HTML CSS-1.png
HTML CSS-1.png (11.66 KiB) Viewed 579 times
HTML CSS-2.png
HTML CSS-2.png (11.72 KiB) Viewed 579 times
เป็นอย่างไรบ้างครับหวังว่าจะเป็นประโยชน์กับผู้ที่กำลังหาวิธีการปิด textbox เพื่อนำไปใช้ในโปรเจคอยู่นะครับ


ศึกษาเพิ่มเติม
บทเรียน HTML5
บทเรียน CSS
บทความแชร์ความรู้เกี่ยวกับ html และ css
สอบถามปัญหา-ตอบ เกี่ยวกับ html และ css


อ้างอิง
https://www.w3schools.com/tags/att_input_type_radio.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
https://stackoverflow.com/questions/10583392/how-to-make-disabled-readonly-functionality-for-radio-buttons-and-checkboxes
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 3 guests