โดยวันนี้เราจะมาลองเขียนให้เมื่อเราเลือก radio button ที่เราต้องการแล้วมันจะไปปิดช่อง textbox ที่เรากำหนดเพื่อไม่ให้ user สามารถแก้ไขข้อมูลได้ ตัวอย่างดังนี้
code html
โค้ด: เลือกทั้งหมด
<!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>
 <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>
 <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>
โค้ด: เลือกทั้งหมด
<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>
ผลลัพธ์ เป็นอย่างไรบ้างครับหวังว่าจะเป็นประโยชน์กับผู้ที่กำลังหาวิธีการปิด 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