以编程方式在jQuery按钮组中选择无线电使其分解

时间:2013-09-23 08:30:59

标签: javascript jquery jquery-ui jqueryi-ui-buttonset

我正在使用基于单选按钮的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>

JavaScript的:

// 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');
  });

我尝试了很多东西,比如尝试触发每个单选按钮的标签点击功能等等,但是找不到任何有用的东西。任何意见都表示赞赏!

2 个答案:

答案 0 :(得分:26)

您需要使用.prop()代替.attr()来设置检查状态

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

演示:Fiddle

阅读:Attributes vs Properties

答案 1 :(得分:2)

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

您可以触发click(),使其正常工作

  $("#r_private").click()