Counting the number of disabled DIVs

StackOverflow https://stackoverflow.com/questions/22281942

Pergunta

I am working on this example here. What I have is, say, two sections (div id="sec1" and "sec2"), each of which contains divs (div id="Q+id"). Using radio control, user disables either section 1 or section 2, thus disabling all contained divs and their controls. I would like to count number of DISABLED divs (id="Q+id") and figure out HOW MANY DIVs remain ENABLED.

First, I counted ALL available DIVs with (id="Q+id") and feed the result into field "ALL"

 $(function () 
    {
   var counter = $("[id^=Q]").filter(function ()
    {
    return this.id.match(/Q\d+/); 
    }).length;
    $("input[name=ALL]").val(counter);
});

Now I need to somehow get disabled DIVs and then something like ("ALL"-"DIS"="LEFT").

PS. One more question. When I am testing the above example locally, I am using

$("#sec1").toggle(this.checked).prop("disabled", true);

to disable section and surely it works fine. However, in JSFiddle I have to use

$("#sec1 :input").toggle(this.checked).prop("disabled", true);

adding up ":input" to get the same effect. Why? Thanks in advance!

UPDATE: Corresponding HTML

<body>
<div class="Response">
    <label><input type="radio" name="Radio" value="1" id="t4201">4201</label>
    <label><input type="radio" name="Radio" value="2" id="t4202">4202</label>
</div>

<div class="figures">
    <div id="Template_Questions">
        <label for="number1">Number of ALL items:</label>
        <input class="counter" type="number" name="ALL" id="number1">
    </div>
    <div id="Disabled_Questions">
        <label for="number2">Number of disabled items:</label>
        <input class="counter" type="number" name="DIS" id="number2">
    </div>
    <div id="Left_Questions">
        <label for="number3">Number of left items: (ALL-DIS)</label>
        <input class="counter" type="number" name="LEFT" id="number3">
    </div>
    <div id="Responded_Questions">
        <label for="number4">Number of RESPONDED items:</label>
        <input class="counter" type="number" name="RESP" id="number4">
    </div>
</div>

<div id="sec1"> <!--Three Qs -->
    <div class="A" id="Q01">
        <h4>Title 1</h4>
        <p>Some Content</p>
            <div class="Response">
                <label><input type="radio" name="Radio1" value="Y" id="R1Y">Yes</label>
                <label><input type="radio" name="Radio1" value="N" id="R1N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs1">Notes:</label><br>
                <textarea name="observation" id="Obs1"></textarea>
            </div>
    </div>
    <div class="B" id="Q02">
        <h4>Title 2</h4>
        <p>Some Content</p>
            <div class="Response">
                <label><input type="radio" name="Radio2" value="Y" id="R2Y">Yes</label>
                <label><input type="radio" name="Radio2" value="N" id="R2N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs2">Notes:</label><br>
                <textarea name="observation" id="Obs2"></textarea>
            </div>
    </div>
    <div class="B" id="Q03">
        <h4>Title 3</h4>
        <p>Some Content</p>
        <div class="Response">
            <label><input type="radio" name="Radio3" value="Y" id="R3Y">Yes</label>
            <label><input type="radio" name="Radio3" value="N" id="R3N">No</label>
        </div>
        <div class="Observation">
            <label for="Obs3">Notes:</label><br>
            <textarea name="observation" id="Obs3"></textarea>
        </div>
    </div>
</div> <!--End of sec1 -->

<div id="sec2"> <!--Two Qs -->
    <div class="B" id="Q04">
        <h4>Title 4</h4>
        <p>Some Content</p>
        <div class="Response">
            <label><input type="radio" name="Radio4" value="Y" id="R4Y">Yes</label>
            <label><input type="radio" name="Radio4" value="N" id="R4N">No</label>
        </div>
        <div class="Observation">
            <label for="Obs4">Notes:</label><br>
            <textarea name="observation" id="Obs4"></textarea>
        </div>
    </div>
    <div class="B" id="Q05">
        <h4>Title 5</h4>
        <p>Some Content</p>
        <div class="Response">
            <label><input type="radio" name="Radio4" value="Y" id="R5Y">Yes</label>
            <label><input type="radio" name="Radio4" value="N" id="R5N">No</label>
        </div>
        <div class="Observation">
            <label for="Obs5">Notes:</label><br>
            <textarea name="observation" id="Obs5"></textarea>
        </div>
    </div>
</div> <!--End of sec2 -->
Foi útil?

Solução

Try

$("[id^=Q]:has(input[disabled])").length; //get length of disabled div's(having input disabled in it)

Outras dicas

Try the has method:

$("[id^=Q]").filter(function (){
    return this.id.match(/Q\d+/); 
}).has(':disabled').length;
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top