（已解決）javascript 滑鼠觸發控制事件 for 迴圈

html javascript jquery

小斑 2018-11-09 17:46:50 ‧ 2451 瀏覽

分享至

下列程式是重複N個(舉兩個作範例)

希望在點選項二時，能讓選項三和四的disabled="true"

但在點回選項一時，removeAttribute("disabled")

需一次處理N個上述事件，請問有高人能指點嗎？謝謝

<div>
    <div>
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_1-1" id="choose1-1" value="選項一">
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_1-1" id="choose1-2" value="選項二">
    </div>
    <div>
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_1-2" id="choose1-3" value="選項三">
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_1-2" id="choose1-4" value="選項四">
    </div>
</div>

<div>
    <div>
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_2-1" id="choose2-1" value="選項一">
    <input type="radio" onclick="check_choose1(this)" class="default_status" name="status_2-1" id="choose2-2" value="選項二">
    </div>
    <div>
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_2-2" id="choose2-3" value="選項三">
    <input type="radio" onclick="check_choose2(this)" class="default_status" name="status_2-2" id="choose2-4" value="選項四">
    </div>
</div>
.
.
.
.
.
.
N個上述的範例

froce iT邦大師 1 級 ‧ 2018-11-09 20:02:06 檢舉

先去搞清楚id和class是幹嘛的吧，光看你html就覺得你沒搞懂。

小斑 iT邦新手 3 級 ‧ 2018-11-09 20:44:44 檢舉

感謝
有修正html了

登入發表討論

直播研討會

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

直播中

2 個回答

淺水員

iT邦大師 6 級 ‧ 2018-11-10 01:36:14

最佳解答

function check_choose1(oRadio)
{
    //取得該層選項三與選項四
    var prefix=oRadio.id.substr(0,oRadio.id.length-1);
    var input3=document.getElementById(prefix+"3");
    var input4=document.getElementById(prefix+"4");
    
    //判斷點選的物件是選項一還是選項二，做不同的處理
    //這邊我就偷懶直接看 id 的最後一個字是什麼
    if(oRadio.id.substr(-1)==="2") {
        //選項二的處理
        input3.setAttribute("disabled",true);
        input4.setAttribute("disabled",true);
    } else {
        //選項一的處理
        input3.removeAttribute("disabled");
        input4.removeAttribute("disabled");
    }
}

回應 3
分享
檢舉

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-11-10 05:34:05 檢舉

這樣寫有問題吧，無論位置還是選擇input都是寫死的作法，小朋友不要學，會害到後面維護的人～

淺水員 iT邦大師 6 級 ‧ 2018-11-10 10:01:41 檢舉

謝謝，昨天一時沒注意到，上面改了。
原本想說請樓主看您的程式碼就好，但還是有點差異，我是想說不動到他上面 html 下去寫的。

小斑 iT邦新手 3 級 ‧ 2018-11-12 10:41:06 檢舉

謝謝淺水員,您提供的方法可以使用，容易懂又沒有動到原本html

登入發表回應

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-11-10 06:00:50

既然都有id了，當然要從id下手，好懶得寫，但看不下去了，還有一定不要用onclick這種蠢作法～

function itemCheckProc(n)
{
    for(var i=0; i <= n; ++i) {
        var radioAry = [];
        for(var j=0; j <= 4; ++j) {
            var radio = document.getElementById('choose'+i+'-'+j);
            radioAry.push(radio);
        }
        radioAry[0].onclick = function(){        
            radioAry[2].setAttribute("disabled",true);
            radioAry[3].setAttribute("disabled",true);
        };
        radioAry[1].onclick = function(){        
            radioAry[2].removeAttribute("disabled");
            radioAry[3].removeAttribute("disabled");
        };
    }
}
itemCheckProc(10);

回應 3
分享
檢舉

淺水員 iT邦大師 6 級 ‧ 2018-11-10 10:14:36 檢舉

這程式是不是有 closure 共用 radioAry 變數的問題？
也就是說上面所有 click 事件改變的都會是最後一組資料
(點 #choose1-1 卻會改變 #choose10-3 跟 #choose10-4)

淺水員 iT邦大師 6 級 ‧ 2018-11-11 11:27:57 檢舉

當作練習，稍微改了一下，主要有：

不需要指定 n ，改自動偵測
修正閉包產生的問題

function initChooseEvents()
{
    var i,j,oRadio,radioAry;
    for(i=1;true;++i)
    {
        //暫存 #choose-{i}-{1-4} 到 radioAry
        //如果不存在直接 return 離開這個函式
        radioAry=[];
        for(j=1;j<=4;++j)
        {
            oRadio=document.getElementById('choose'+i+'-'+j);
            if(!oRadio) //當找不到元素時離開
                return;
            radioAry.push(oRadio);
        }
        
        //設定選項一處理
        radioAry[0].onclick=paramBind(function(oRadio3,oRadio4){
            oRadio3.removeAttribute("disabled");
            oRadio4.removeAttribute("disabled");
        },radioAry[2],radioAry[3]);
        
        //設定選項二處理
        radioAry[1].onclick=paramBind(function(oRadio3,oRadio4){
            oRadio3.setAttribute("disabled",true);
            oRadio4.setAttribute("disabled",true);
        },radioAry[2],radioAry[3]);
    }
    
    //為了避免閉包共用變數的問題，使用這個函式來包裝
    function paramBind(callback)
    {
        var params=[].slice.call(arguments).slice(1);
        return function(evt){
            callback.apply(null,params);
        }
    }
    
    /*
    function paramBind(callback,...params) //ES6支援
    {
        return function(evt){
            callback.apply(null,params);
        }
    }*/
}
initChooseEvents();