2013-10-17 112 views
0

由@Grundy解决,溶液在交通过动态地改变属性

的底部选择元件I与其中元件被编程且无需用户直接点击单选元件上选择的无线电选择的形式。

var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found) 
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value 
{ 
    $("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items 
    $elem.attr("checked", true); // Check the found element from before 
} 

这样做,我可以看到Chrome的开发人员工具中的属性更改。上一个选中的输入未选中,相应的项目将被检查。这种方法每次都会专门工作多次(我会解释为什么后面会涉及到)。

接下来,我隐藏所有未经检查的单选按钮并仅显示已选中的单选按钮。

$("input[name=type] + label").hide(); 
$("input[name=type]:checked + label").show(); 

这是第一次选择输入。所有未经检查的输入将被隐藏,并且选中的输入将被隐藏。如果第二次选择了输入(或者再次选择了输入或者之后选择了其他选项),则隐藏所有输入,包括已选中的输入。

如果我检查$("input[name=type]:checked + label")的匹配元素的数量,它将第一次返回1,第二次返回0这意味着它仅在第二次后才会被选中。我觉得这是因为checked属性在那个时候动态地改变了,但这可能不是问题的原因。

编辑 - 这里有一个小提琴 fiddle点击灰色框时通过对值用户点击改变会告诉你它的正常行为。每个值都可以按任意顺序多次选择,但如果您单击底部的文本(它们看起来不好看),它将以编程方式更改窗体。它只是第一次工作,它似乎并不在乎它是否是用户以前选择的。

解决方案 - 信用@Grundy 因为我知道$elem对象,我发现前面是正在改变我可以引用它,而不是直接试图寻找与checked属性的元素的对象。所以我用这个:

var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes 
$elem.next("label").show(); // Referenced after all the changes 

而不是使用这个的:尝试使用,而不是

$("input[name=type]:checked + label").show(); // Referenced after all the changes 
+0

我不确定您可以在元素隐藏时更改复选框的状态。 – sdespont

+0

请提供[小提琴](http://jsfiddle.net/).. – super

+0

@sdespont Chrome的开发人员工具即使在隐藏元素时也会显示属性更改。问题似乎是通过'checked'属性选择该元素。 – JoeyParis

回答

1

$elem.next("label").show(); 

$("input[name=type]:checked + label").show(); 

因为$elem被选中的复选框,你发现

+0

就在那里,http://jsfiddle.net/YFdPa/2/ – Shadow

+0

仍然不知道为什么我的方式不工作,但你的方式和解决我的问题,所以感谢您的建议!标明你的答案是正确的。 – JoeyParis