Disable property using Draggable jquery UI and javascript

The idea of this code is that after the items are dragged and dropped in the field, they change the disable = true property to disable = false. Does anyone know how to do this?

  <style type="text/css"> *{
        margin: 0px;

        border:0px;

    }
    body{
        background-color: rgb(255,255,255);
        font-family: 'Gloria Hallelujah', cursive;
    }

    body>header{
        background-color:#F5F5F5;

        height: 83px;

        box-shadow:1px 1px 5px black;
    }

    #logo img{


        border: 1px solid black;
        box-shadow: 1px 1px 1px black;
    } 


    #logo{ 
        display: inline-block;
        margin-left:80px;
        margin-top: 14px;
    }





    #divBusca{
        background-color:#E0EEEE;
        border:solid 1px black;
        border-radius:10px;
        width:450px;
        height:32px;
        margin-left: 400px;
        margin-top: -48px;
    }

    #txtBusca{
        float:left;
        background-color:transparent;
        padding-left:5px; 
        font-size:18px;
        border:none;
        height:32px;
        width:370px;
    }

    #btnBusca{
        border:none;
        float:right;
        height:32px;
        border-radius:0 7px 7px 0;
        width:70px;
        font-weight:bold;
        background:rgb(240,240,240);
    }

    #construirPerguntas h1 { text-align: center; margin: 0; }
    #construirPerguntas{


        width: 500px;
        height: 500px;
        background-color:rgb(240,240,240);

        margin-top: 50px;
        padding: 5px;


    }

    #componentes{
        display: inline-block;
        margin-left:300px;
        border:2px solid red;
        width: 850px;
        height:100px;

    }
    .formulario{

        border:1px solid red;  


        display:inline-block;


    }


    .draggable,.botaoSubmit,h3 {
        border:1px solid black;
        border-right:3px solid black;
        display: inline-block;}


    form{
        width:700px;
        height: 410px;   }

    #dimensao{

        margin-left:320px;
        margin-top:30px;
        height: 900px; 
        width:900px;
    }

</style>

<section>


    <header>



        <div id="componentes">
            <label >Radio: </label><div  class="draggable" class="ui-widget-content" ><input type="Radio" disabled></div>
            <label>CheckBox: </label><div  class="draggable" class="ui-widget-content"><input type="checkbox"  disabled></div>
            <label>TextArea:</label><div  class="draggable" class="ui-widget-content"> <textarea disabled="true"></textarea></div>     
            <div  class="draggable" class="ui-widget-content"> <span contenteditable>ds</span></div>     


        </div>


    </header>





</section>

<section id="dimensao">

    <div  class="formulario" class="ui-widget-content">
        <form >


            <div class="botaoSubmit" class="ui-widget-content"><input type="submit"></div> 
        </form>


    </div>


</section>




<script>
    $(function () {


        $(".draggable").draggable(
                {
                    helper: "clone", disabled: false

                });

        $(".botaoSubmit").draggable();


        $("form").resizable(
                {
                    animate: true,
                    containment: "#dimensao"
                });

        $(".formulario").droppable({
            accept: ".draggable",
            drop: function (event, ui) {//evento o evento .ui elemento recebido

                var new_signature = $(ui.helper).clone();
                // var new_signature = $(ui.helper).clone();
                new_signature.draggable();//estou dizendo que o clone pode ser arrastado


                ui.draggable.prop("disabled", false);//nao funciona


                $(this).append(new_signature);//estou add o elemnto
                $(ui.helper).remove();//removendo para não criar clones.
            }
        });

    });

</script>