2013-09-23 4 views
6

라디오 단추를 기반으로하는 jQuery 단추 세트를 사용하여 웹 사이트에 편집기 기능을 구축하고 있습니다. 편집기에 항목을로드 할 때 선택한 라디오 단추를 설정해야합니다. 그런 다음 사용자가 옵션을 변경할 수 있고 데이터베이스에 저장됩니다. 항목이 닫히면 단추 세트를 기본값으로 재설정하려고합니다.jQuery 단추 세트에서 라디오를 프로그래밍 방식으로 선택하면 분해됩니다.

문제는 단추 세트를 설정할 때 처음으로 각 항목을 선택하면 작동하고 모두 작동하지 않는다는 것입니다. 문제의

데모 : http://jsfiddle.net/kallsbo/vSmjb/

HTML :

<div id="dumpSec"> 
    <input type="radio" name="security" id="r_public" value="public" class="rSec"> 
    <label for="r_public"><i class="icon-globe"></i> Public</label> 
    <input type="radio" name="security" id="r_private" value="private" class="rSec"> 
    <label for="r_private"><i class="icon-lock"></i> Private</label> 
    <input type="radio" name="security" id="r_link" value="link" class="rSec"> 
    <label for="r_link"><i class="icon-link"></i> Anyone with the link</label> 
</div> 
<div> 
    If you use the buttons below you can programmatically select each of the radios in the buttonset once before it all breaks down... 
</div> 
<div> 
    <button id="nbr1">Select Private</button><br/> 
    <button id="nbr2">Select Link</button><br/> 
    <button id="nbr3">Select Public</button><br/> 
</div> 

자바 스크립트 : 나는 각 라벨의 클릭 기능을 트리거하기 위해 노력하고 같은 여러 가지를 시도

// Basic function 
$("#dumpSec").buttonset(); 
$("#r_public").attr("checked", true); 
$("#dumpSec").buttonset('refresh'); 

// Put in functions on the demo buttons 
$("#nbr1") 
    .button() 
    .click(function(event) { 
    $("#r_private").attr("checked", true); 
    $("#dumpSec").buttonset('refresh'); 
    }); 

$("#nbr2") 
    .button() 
    .click(function(event) { 
    $("#r_link").attr("checked", true); 
    $("#dumpSec").buttonset('refresh'); 
    }); 

$("#nbr3") 
    .button() 
    .click(function(event) { 
    $("#r_public").attr("checked", true); 
    $("#dumpSec").buttonset('refresh'); 
    }); 

라디오 버튼 등등.하지만 나는 아무것도 작동하지 않습니다. 모든 입력을 부탁드립니다! Fiddle

읽기 : Attributes vs Properties

답변

24

당신은 체크 상태를 설정하는 대신 .attr().prop()를 사용할 필요가 그것은 작동한다

$("#r_private").click() 
+0

왜 솔루션에 대한 링크 및 설명서에 감사드립니다! –

1

http://jsfiddle.net/vSmjb/2/

당신이 click()를 실행할 수 있도록

$("#r_link").prop("checked", true); 

데모

+0

답장을 보내 주셔서 감사합니다! 이것은 아름답게 작동합니다! 어떻게 Aruns 솔루션이 최고의 연습 방법 인 것 같습니다 ... –