javascript - jquery focus function not working on checkbox

Question

I have a form that contains a checkbox in a row. I want to focus to that checkbox if any option isn't marked.

<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>

Then I have a function that is called if the checkbox does not have any marked item. The params passed to the functions are dynamic. Concatening I obtain the current id, of the elem to focus. For example: the 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;
}

Even in firefox console if I do this:

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

it doesn't focus to that elem.

标签： javascriptjqueryjspfocus

Answer 1

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

尝试这个：

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