Question

我有一个jQuery脚本，如果有人点击收音机“是”按钮，则应启用相关的文本字段，如果有人点击“否”单选按钮，则禁用该文本字段。我遇到的问题是 每个行中的每个文本字段都将被禁用/启用并且通过仅单击第一对是/否单选按钮将值设置为0

我需要弄清楚如何禁用并将0值分配给专门与分配给它的单选按钮相关联的文本字段。

以下是3个示例行的HTML

Yes <input name="getFlow1" type="radio" value="1"  />
No  <input name="getFlow1" type="radio" value="0" checked />
<input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>

Yes <input name="getFlow2" type="radio" value="1"  />
No  <input name="getFlow2" type="radio" value="0" checked />
<input name="enterFlowVal2" id="enterFlowVal2" value="0" size="7" type="text" disabled="disabled"/>

Yes <input name="getFlow3" type="radio" value="1"  />
No  <input name="getFlow3" type="radio" value="0" checked />
<input name="enterFlowVal3" id="enterFlowVal3" value="0" size="7" type="text" disabled="disabled"/>

这是jQuery，，它在某种程度上起作用，但是错了。

$(document).ready(function (){  
        $("input[name^=getFlow]").(function(i){
            if (i == 1) { //the "no" radiobutton
                $(this).click(function () {
                    var zero = 0;                   
                    $("input[name^=enterFlowVal]").attr("disabled", "disabled");
                    $("input[name^=enterFlowVal]").val(zero);                       
                });
            } else {
                $(this).click(function () {
                    $("input[name^=enterFlowVal]").removeAttr("disabled");
                });
            }
        }); 

   }         
);

Answer 1

最简单的方法可能就是将每个“set”输入包装在一个包含的div中，比如

<div>
    Yes <input name="getFlow1" type="radio" value="1"  />
    No  <input name="getFlow1" type="radio" value="0" checked />
    <input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>
</div>

然后使用

之类的东西

$(document).ready(function (){  
    $("input[name^=getFlow]").(function(i){
        if (i == 1) { //the "no" radiobutton
            $(this).click(function () {
                var zero = 0;                   
                $(this).parent().children("input[name^=enterFlowVal]").attr("disabled", "disabled");
                $(this).parent().children("input[name^=enterFlowVal]").val(zero);                       
            });
        } else {
            $(this).click(function () {
                $(this).parent("input[name^=enterFlowVal]").removeAttr("disabled");
            });
        }
    }); 

   }         
);

基本上，父函数将找到Input的父级，这应该是想法，这将限制您的选择仅限于该父div中名为enterFlowVal的输入。您可能需要稍微修改一下。

Answer 2

就个人而言，我会略微修改你的标记，以使这项任务更容易。添加某些描述的父标记允许您限制可用输入。

<div class="option-group">
    Yes <input name="getFlow1" type="radio" value="1"  />
    No  <input name="getFlow1" type="radio" value="0" checked />
    <input name="enterFlowVal1" id="enterFlowVal1" value="0" size="7" type="text" disabled="disabled"/>
</div>

<div class="option-group">
    Yes <input name="getFlow2" type="radio" value="1"  />
    No  <input name="getFlow2" type="radio" value="0" checked />
    <input name="enterFlowVal2" id="enterFlowVal2" value="0" size="7" type="text" disabled="disabled"/>
</div>

然后在jQ中：

$(document).ready(function (){  
        $("input[name^=getFlow]").(function(i){
            if (i == 1) { //the "no" radiobutton
                $(this).click(function () {
                    var zero = 0;                   
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").attr("disabled", "disabled");
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").val(zero);                       
                });
            } else {
                $(this).click(function () {
                    $(this).closest(".option-group").children("input[name^=enterFlowVal]").removeAttr("disabled");
                });
            }
        }); 

   }         
);

Answer 3

您可以尝试使用next（）选择文本输入：

$(this).click(function(){
    var zero = 0;
    $(this).next('input[type^=text]').attr('disabled','disabled');
    $(this).next('input[type^=text]').val(zero);
});

尚未对其进行测试，但类似的内容只应将所有归因更改应用于下一个文本字段，而非所有属性。

Answer 4

尝试

$(this).nextAll("input[name^=enterFlowVal]").first()

而不是

$("input[name^=enterFlowVal]")

如果您无法更改标记。如果你可以改变它，我宁愿使用上面使用共同祖先的建议，

使用jQuery禁用特定的文本字段

4 个答案: