Question

我正在研究这个例子here。我所拥有的是两个部分（div id =“sec1”和“sec2”），每个部分都包含div（div id =“Q + id”）。使用无线电控制，用户禁用第1部分或第2部分，从而禁用所有包含的div及其控件。我想计算DISABLED div的数量（id =“Q + id”），并计算出许多DIV仍然有效。

首先，我计算了所有可用的DIV（id =“Q + id”）并将结果输入“ALL”字段

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

现在我需要以某种方式获得禁用的DIV，然后像（“ALL” - “DIS”=“LEFT”）。

PS。还有一个问题。当我在本地测试上面的例子时，我正在使用

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

禁用部分，当然它工作正常。但是，在JSFiddle中我必须使用

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

加起来“：input”以获得相同的效果。为什么？提前谢谢！

更新：对应的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 -->

Answer 1

尝试

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

Answer 2

尝试has方法：

$("[id^=Q]").filter(function (){
    return this.id.match(/Q\d+/); 
}).has(':disabled').length;

计算禁用的DIV数量

2 个答案: