Question

我尝试编写一些脚本，我可以在调用对话框之前设置一些参数。只有一个按钮，OK和radiobutton组。我计划在通话前更改对话框的标题，也可以自由（语法）设置选中哪个单选按钮。第一次调用，在加载脚本后，显示没有选中radiobutton的对话框，但如果我检查其中任何一个然后重复调用（例如，按下按钮调用），则会出现对话框，其中包含先前选择的单选按钮，但返回值为“未定义” 。我需要这个：

我希望programicaly在调用打开它之前设置对话框中的任何radiobuttons
我希望能够重置radiobuttons（选中none），如果之前已经检查过任何一个

我尝试了一些我在这里找到的解决方案，但没有得分。

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="//resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
 $( "#dialog-oc" ).dialog({
      modal: true,
      width: 520,
      resizable:false,
      autoOpen: false,
      buttons: {
        Ok: function() {
          var odg=$('input[name="radiooc"]:checked', '#dialog-oc').val();
           $('#dialog-oc input:radio:checked').each(function () {
              $(this).attr('checked', false);
            });
          $("#dialog-oc").dialog("close"); //close dialog
          alert('Answer is '+odg);
        }
      }
    });
});

//open dialog
$("#dialog-oc" ).dialog( "open" );
$('#dialog-oc input:radio').prop('checked', false); //reset radiobuttons
$(".second").attr('checked', false); //reset by using class
//change title of dialog, this works OK:
$("#dialog-oc").dialog("option", "title", "New title");

$( function() {
    $( "input" ).checkboxradio();
    $( "fieldset" ).controlgroup();
});
</script>

<body>
<div class="widget" id="dialog-oc" title="Pick a one">
    <fieldset>
    <legend>Pick quantity: </legend>
    <label for="radio-1">1</label>
    <input type="radio" name="radiooc" id="radio-1" class="second" value="1">
    <label for="radio-2">2</label>
    <input type="radio" name="radiooc" id="radio-2" class="second" value="2">
    <label for="radio-3">3</label>
    <input type="radio" name="radiooc" id="radio-3" class="second" value="3">
  </fieldset>
</div>
</body>

Answer 1

我认为这可能会有所帮助;不确定。

工作示例：https://jsfiddle.net/Twisty/t0a7uabq/

<强> HTML

<button id="sel-btn">Select</button>
<div id="dialog-oc" title="Pick a one">
  <fieldset>
    <legend>Pick quantity: </legend>
    <label for="radio-1">1</label>
    <input type="radio" name="radiooc" id="radio-1" class="second" value="1">
    <label for="radio-2">2</label>
    <input type="radio" name="radiooc" id="radio-2" class="second" value="2">
    <label for="radio-3">3</label>
    <input type="radio" name="radiooc" id="radio-3" class="second" value="3">
  </fieldset>
</div>

<强>的JavaScript

$(function() {
  $("#dialog-oc").dialog({
    modal: true,
    width: 520,
    resizable: false,
    autoOpen: false,
    buttons: {
      Ok: function() {
        var odg = $('#dialog-oc input:checked').val();
        $("#sel-btn").data("sel", $('#dialog-oc input:checked').attr("id"));
        $('#dialog-oc input:radio').each(function() {
          $(this).prop('checked', false);
        });
        $("#dialog-oc").dialog("close"); //close dialog
      }
    },
    open: function(e, ui) {
      if ($('#sel-btn').data("sel") !== null) {
        var mySel = $('#sel-btn').data("sel");
        $("#" + mySel).prop("checked", true);
      }
    }
  });

  //open dialog
  $("#dialog-oc").dialog("open");
  $("#sel-btn").click(function() {
    $("#dialog-oc").dialog("open");
  })
  $('#dialog-oc input:radio').prop('checked', false); //reset radiobuttons
  $(".second").attr('checked', false); //reset by using class
  //change title of dialog, this works OK:
  $("#dialog-oc").dialog("option", "title", "New title");

  $("input").checkboxradio();
  $("fieldset").controlgroup();
});

您可以使用open回调来执行可以将单选按钮设置为checked的代码。当对话框关闭时，我使用.data()功能存储选定的id。这样，相同的元素在打开时设置为检查。

如何设置/重置对话框单选按钮组？

1 个答案: