(網頁問題)當選中一個radio時,將checkbox設定為只能選其中一個~~ 求解決方法~~~

(網頁問題)當選中一個radio時,將checkbox設定為只能選其中一個求解決方法~

php html javascript

s9005555 2019-07-25 16:47:33 ‧ 2364 瀏覽

分享至

小弟為一個IT新人菜鳥，目前遇到一個難題，麻煩各位大神幫幫忙~

問題如下~

今天我在網頁上點選一個radio時,我要將下方的checkbox設定為只能選其中一項~

ex: 今天假設網頁上有一個radio,兩個選項分別為"住院","不住院"，而在這個radio選項下方有一個checkbox選項分別為"開立住院證明"，"開立診斷證明"，"無須證明"等選項。

   此時當我選擇"住院"這個radio時，我需要將下方的checkbox設定只能且必須選擇其中一個"開立住院證明"，的選項，其餘checkbox不能點(這邊可能點了要跳出alert視窗提醒且除掉點過的勾勾只剩下開立診斷證明的選項)。
   
   請問有大神可以幫幫忙想出解決辦法嗎，小弟爬google整天也想不出辦法~~~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

dragonH

iT邦超人 5 級 ‧ 2019-07-25 17:13:56

最佳解答

codepen

const hospitalType = document.getElementsByName('hospitalType');
const prove = document.getElementsByName('prove');
const prove1 = document.getElementById('prove1');
const prove2 = document.getElementById('prove2');
const prove3 = document.getElementById('prove3');
const hospitalSelected = () => {
  const radioChecked = [...hospitalType].filter(el => el.checked)[0].id;
  switch (radioChecked) {
    case 'inHospital': {
      alert('提醒');
      prove2.disabled = true;
      prove2.checked = false;
      prove3.disabled = true;
      prove3.checked = false;
      break;
    }
    case 'notInHospital': {
      prove2.disabled = false;
      prove3.disabled = false;
      break;
    }
    default: {
      break;
    }
  }
}
const proveSelected = (e) => {
  if (e.target.checked) {
    const checkPosition = [...prove].map(el => el.id).indexOf(e.target.id);
    const checkToClear = [...prove];
    checkToClear.splice(checkPosition, 1);
    checkToClear.forEach(el => el.checked = false);
  }
}
hospitalType.forEach(el => el.addEventListener('change', hospitalSelected));
prove.forEach(el => el.addEventListener('change', proveSelected));

回應
分享
檢舉

登入發表回應

優悠

iT邦新手 3 級 ‧ 2019-07-25 17:29:30

//JQ寫法
//radio的事件
//ID1,為住院
 $("#ID1").on('ifChecked', function (event) {
            $("#checkbox1").iCheck('uncheck');
            $("#checkbox1").attr('disabled', 'disabled');
            $("#checkbox2").iCheck('uncheck');
            $("#checkbox2").attr('disabled', 'disabled');
            $("#checkbox3").iCheck('check');
            //checkbox3,為開立住院證明
        });
//ID2,為不住院
$("#ID2").on('ifChecked', function (event) {
            $("#checkbox1").removeAttr('disabled');
            $("#checkbox2").removeAttr('disabled');
        });

其餘自己搜尋