iT邦幫忙

1

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

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

問題如下~

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

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

   此時當我選擇"住院"這個radio時,我需要將下方的checkbox設定只能且必須選擇其中一個"開立住院證明",的選項,其餘checkbox不能點(這邊可能點了要跳出alert視窗提醒且除掉點過的勾勾只剩下開立診斷證明的選項)。
   
   請問有大神可以幫幫忙想出解決辦法嗎,小弟爬google整天也想不出辦法~~~
1
dragonH
iT邦高手 1 級 ‧ 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));
0
優悠
iT邦新手 4 級 ‧ 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');
        });

其餘自己搜尋

0

我要發表回答

立即登入回答