วิธีการเปิดใช้งานปุ่มวิทยุที่ถูกปิดใช้งาน: คู่มือแบบทีละขั้นตอน

เมื่อทำงานกับแบบฟอร์มเว็บ มักจะพบกับสถานการณ์ที่คุณต้องเปิดหรือปิดฟิลด์อินพุตแบบไดนามิกตามการโต้ตอบของผู้ใช้ หนึ่งในสถานการณ์ดังกล่าวเกี่ยวข้องกับ ปุ่มวิทยุ ที่ควรเปิดหรือปิดการใช้งานตามการเลือกที่ทำในเมนูแบบเลื่อน หากคุณได้พบความไม่สอดคล้องกันในเบราว์เซอร์ที่แตกต่างกัน โดยเฉพาะระหว่าง Internet Explorer กับเบราว์เซอร์อื่น ๆ เช่น Firefox (FF) หรือ Safari คุณไม่ได้อยู่คนเดียว บล็อกโพสต์นี้จะนำคุณผ่านวิธีแก้ปัญหาเพื่อให้แน่ใจว่าปุ่มวิทยุของคุณทำงานได้อย่างถูกต้อง ไม่ว่าคุณจะใช้เบราว์เซอร์ใด

ปัญหา

ในโค้ดต้นฉบับ ปุ่มวิทยูได้รับการออกแบบให้ถูกปิดหรือเปิดใช้งานเมื่อผู้ใช้เลือกตัวเลือกจากเมนูแบบเลื่อน ในขณะที่ฟังก์ชันนี้ทำงานได้อย่างไม่มีปัญหาบน Internet Explorer แต่กลับผิดพลาดในเบราว์เซอร์อื่น ๆ เช่น Firefox และ Safari โดยเฉพาะเมื่อผู้ใช้เรียกดูด้วยแป้นพิมพ์มากกว่าการใช้เมาส์ การปิดหรือเปิดปุ่มวิทยุจะมีผลก็ต่อเมื่อมีการคลิกเพิ่มเติมที่ไหนสักแห่งบนหน้าเว็บ พฤติกรรมที่ไม่คาดคิดนี้อาจทำให้ผู้ใช้รู้สับสน

ตัวอย่างโค้ด

นี่คือรุ่นที่เรียบง่ายของโค้ดเริ่มต้นที่คุณมักจะพบ:

<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" onchange="javascript: SetLocationOptions()">
    <option value="">เลือกหนึ่ง</option>
    <option value="58" user_is_tsm="0">เปิดใช้งานปุ่มวิทยุทั้งสองตัว</option>
    <option value="157" user_is_tsm="1">ปิดการใช้งานปุ่มวิทยุ 2 ตัว</option>
  </select>
  <br/><br/>
  <input type="radio" name="transfer_to" value="fund_amount1" />Premium&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="fund_amount2" />อื่นๆ&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />ทั้งสอง
  <br/><br/>
  <input type="button" class="buttonStyle" value="ส่งคำร้องขอ" />
</form>

วิธีแก้ปัญหา

เพื่อแก้ไขความไม่สอดคล้องและปรับปรุงความเข้ากันได้ของเบราว์เซอร์ เราสามารถพัฒนาองค์ประกอบ select ให้ตอบสนองต่อเหตุการณ์แป้นพิมพ์ได้เช่นกัน โดยเฉพาะการเพิ่มตัวจัดการเหตุการณ์ keyup จะช่วยให้โค้ดทำงานไม่เพียงแต่เมื่อเมนูแบบเลื่อนเปลี่ยนผ่านเมาส์ แต่ยังเมื่อมีการนำทางโดยใช้แป้นพิมพ์ด้วย

โค้ดที่ปรับปรุงแล้ว

นี่คือวิธีการนำการเปลี่ยนแปลงที่จำเป็นมาใช้:

  1. เพิ่มเหตุการณ์ onkeyup: นี่จะเรียกใช้ฟังก์ชัน SetLocationOptions ทุกครั้งเมื่อผู้ใช้ปล่อยปุ่มหลังจากมีการโต้ตอบกับ select box
<select name="user" id="selUser" onchange="SetLocationOptions()" onkeyup="SetLocationOptions()">

ฟังก์ชัน JavaScript ที่ครบถ้วน

สำหรับบริบท นี่คือฟังก์ชัน SetLocationOptions ที่ครบถ้วนพร้อมกับ HTML ที่ปรับปรุงแล้ว:

function SetLocationOptions() {
  var frmTemp = document.frm;
  var selTemp = frmTemp.user;
  
  // ตรวจสอบดัชนีตัวเลือกที่เลือก
  if (selTemp.selectedIndex >= 0) {
    var myOpt = selTemp.options[selTemp.selectedIndex];
    if (myOpt.attributes[0].nodeValue == '1') {
      frmTemp.transfer_to[0].disabled = true;
      frmTemp.transfer_to[1].disabled = true;
      frmTemp.transfer_to[2].checked = true;
    } else {
      frmTemp.transfer_to[0].disabled = false;
      frmTemp.transfer_to[1].disabled = false;
    }
  }
}
<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" id="selUser" onchange="SetLocationOptions()" onkeyup="SetLocationOptions()">
    <option value="">เลือกหนึ่ง</option>
    <option value="58" user_is_tsm="0">เปิดใช้งานปุ่มวิทยุทั้งสองตัว</option>
    <option value="157" user_is_tsm="1">ปิดการใช้งานปุ่มวิทยุ 2 ตัว</option>
  </select>
  <br/><br/>
  <input type="radio" name="transfer_to" value="fund_amount1" />Premium&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="fund_amount2" />อื่นๆ&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />ทั้งสอง
  <br/><br/>
  <input type="button" class="buttonStyle" value="ส่งคำร้องขอ" />
</form>

สรุป

โดยการนำตัวจัดการเหตุการณ์ onkeyup มาใช้ คุณสามารถให้แน่ใจว่าปุ่มวิทยุของคุณจะถูกเปิดหรือปิดอย่างถูกต้อง ไม่ว่าผู้ใช้จะมีการโต้ตอบกับดรอปดาวน์ผ่านเมาส์หรือแป้นพิมพ์ การปรับตัวเล็กน้อยนี้สามารถเพิ่มประสบการณ์ของผู้ใช้ได้อย่างมากและให้โมเดลการโต้ตอบที่สอดคล้องในเบราว์เซอร์เว็บที่แตกต่างกัน

อย่าลืมทดสอบตัวอย่างที่อัปเดตในสภาพแวดล้อมของคุณและสนุกกับประสบการณ์ผู้ใช้ที่ราบรื่นและเชื่อถือได้มากขึ้น!