2017-10-23 15 views
1

私はダイアログを呼び出す前にいくつかのパラメータを設定できるスクリプトを書こうとしています。 OKボタンとラジオボタングループは1つのみです。私は、呼び出す前にダイアログのタイトルを変更し、どのラジオボタンがチェックされているかを文法的に自由に設定する予定でした。最初の呼び出しは、スクリプトがロードされた後に、ラジオボタンがチェックされていないダイアログを表示しますが、それらのどれかをチェックしてからコールを繰り返すと(たとえば、ボタンを押してコールするなど)、以前に選択されたラジオボタンでダイアログが表示されますが、 。 私はこの必要があります:私はそれらのいずれかの場合、私は(何もしないことを確認する)ラジオボタンをリセットできるようにしたい、それをダイアログラジオボタングループを設定/リセットする方法は?

  • を開くために呼び出しの前にダイアログでラジオボタンのいずれかをチェックする設定をprogrammaticalyしたい

    1. を先にチェックされました

    私はここで、そこに見つかりましたが、スコアはありませんでした。

    <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> 
    
  • +0

    ダイアログを開いたときにどのラジオボタンをチェックする必要があるのですか? – Twisty

    +0

    ダイアログで[OK]ボタンをクリックした後にラジオボタンが押されたのを読むことはできますが、ダイアログを開く前にラジオボタンを設定することはできません。また、ダイアログを開くために、各呼び出しの後にすべてのラジオボタンをオフにして、最後の呼び出しで何のラジオボタンがチェックされたのかわからないようにしたいと考えています。 –

    +0

    ラジオボタンをチェックする必要があります。 2回目のパスでは、選択されたもののデータはどこに保存されますか? – Twisty

    答えて

    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のあなたはにラジオボタンを設定することができ、コードを実行するopenコールバックを利用することができ

    $(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(); 
    }); 
    

    checked。私は、ダイアログが閉じられたときに、選択したIDを格納するために.data()機能を使用しました。このようにして、同じ要素が開くときにチェックされるように設定されます。

    +0

    私はあなたの例を試しましたが、私の場合は助けになりませんが、助けてくれてありがとう。 –

    +0

    @ LudusH正確に動作しないのは?あるいはあなたのコードに似ていないあなたの事例ですか?コンソールにエラーがありますか? – Twisty

    +0

    すべては問題ありません。あなたのコードを採用することで、ほとんど目に見えない小さなエラーを作りましたが、改訂後は今すぐOKです。ありがとう。 –

    関連する問題