jQuery焦点功能不适用于复选框

Question

我有一个表单，其中包含一行中的复选框。如果未标记任何选项，我想关注该复选框。

<div class="fila-fila">
    <div class="panel">
        <div class="panel-heading">
            <p class="panel-title oblig-2">Data<span style="display: none;" class="validate_ko_enquesta_radio_button fa fa-times"></span></p>
        </div>
    </div>
    <div class="panel-body tree-col">
        <div class="row">
            <div class="col-md-6">
                <div class="well well-sm" onclick='javascript:remarcarInput("question_4_1_0_0",true,"1","0","4")'>
                    <div class="icheckbox_square-red" style="position: relative;" aria-checked="false" aria-disabled="false">
                        <input
                            value="1"
                            type="checkbox"
                            name="question_4_1_0"
                            id="question_4_1_0_0"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        />
                        <ins
                            class="iCheck-helper"
                            onclick="showHideIcon(4);"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        ></ins>
                    </div>
                    <label for="question_4_1_0_0" class="text-oblig">1 </label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="well well-sm" onclick='javascript:remarcarInput("question_4_1_0_1",true,"1","0","4")'>
                    <div class="icheckbox_square-red" style="position: relative;" aria-checked="false" aria-disabled="false">
                        <input
                            value="2"
                            type="checkbox"
                            name="question_4_1_0"
                            id="question_4_1_0_1"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        />
                        <ins
                            class="iCheck-helper"
                            onclick="showHideIcon(4);"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        ></ins>
                    </div>
                    <label for="question_4_1_0_1" class="text-oblig">2 </label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="well well-sm" onclick='javascript:remarcarInput("question_4_1_0_2",true,"1","0","4")'>
                    <div class="icheckbox_square-red" style="position: relative;" aria-checked="false" aria-disabled="false">
                        <input
                            value="3"
                            type="checkbox"
                            name="question_4_1_0"
                            id="question_4_1_0_2"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        />
                        <ins
                            class="iCheck-helper"
                            onclick="showHideIcon(4);"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        ></ins>
                    </div>
                    <label for="question_4_1_0_2" class="text-oblig">3 </label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="well well-sm" onclick='javascript:remarcarInput("question_4_1_0_3",true,"1","0","4")'>
                    <div class="icheckbox_square-red" style="position: relative;" aria-checked="false" aria-disabled="false">
                        <input
                            value="4"
                            type="checkbox"
                            name="question_4_1_0"
                            id="question_4_1_0_3"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        />
                        <ins
                            class="iCheck-helper"
                            onclick="showHideIcon(4);"
                            style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
                        ></ins>
                    </div>
                    <label for="question_4_1_0_3" class="text-oblig">4</label>
                </div>
            </div>
        </div>
    </div>
</div>

然后我有一个函数，如果复选框没有任何标记的项目，则调用该函数。 传递给函数的参数是动态的。连接我获得当前 id，要关注的元素。例如：id elem: question_4_1_0_1

function checkCheckBoxShow(tipoMens,valor,numLinea,numGrup,numElem,oblig){
    var text=gEnquestaErrorSI;
    text=text.replace("#VALOR#",valor);
    $("#avisEnquestaError").html(text);
    console.log("mnsErrorRadioButton"+"#question_"+numLinea+"_"+numGrup+"_"+numElem+oblig);//params are correct

    $("#question_"+numLinea+"_"+numGrup+"_"+numElem+oblig).focus();//FOCUS NOT WORKING

    var elements = document.getElementsByClassName('validate_ko_enquesta_radio_button');
    var j = 0;
    var trobat = false;
    var requiredElement = null;
    var index = null;
    while (!trobat && j<elementsOblig.length){
        if(elementsOblig[j].iteracio == numLinea){
            trobat=true;
            index = j;
        }
        j++;
    }
        if (trobat) {
        requiredElement = elements[index];
        $(requiredElement).show();
    }
    $('.error-pagina').show();
    //$("#avisEnquestaError").css("display","block");
    $("#avisEnquestaError").css("display","inline");
    console.log("falseeeeeeeeeeeeee");
    return false;
}

如果我这样做，即使在 Firefox 控制台中：

$("#question_4_1_0_0").focus();

它不关注那个元素。

Answer 1

问题在于 focus() 是一个基本的 javascript 方法，而您正试图将其应用于 jQuery 对象。

试试这个：

document.getElementById("question_4_1_0_0").focus();