change property disabled in a variable containing html with jquery or js

Question

I need to disable the elements of class "gcf_crud" that are into a variable.

My wrong code is:

var defText = ''+
'   <div class="form-group col-md-12">'+
'       <h4 id="minimum-setp">{{title}}</h4>'+
'       <input type="text" class="form-control gcf_crud" id="txtUsuari" value="{{data}}"/>'+
'   </div>';
var defTextDisabled = $(defText).find('.gcf_crud').prop('disabled', true);

With this code i'm obtaining only the input but I need all the original html.

How may I do it right?

Regards, Seak

"i'm obtaining only the <input>". That is because you only select the input: .find('.gcf_crud') — blex
– blex, Commented Apr 19, 2016 at 20:22
and how to select all but only disable the .gcf_crud class elements? — Seak
– Seak, Commented Apr 19, 2016 at 20:27
I'm not entirely sure of what you want to do, but is this it? jsfiddle.net/ku2j3c5m — blex
– blex, Commented Apr 19, 2016 at 20:32
yes! That's exactly what i wanted!! wich differences are between your and mine codes? — Seak
– Seak, Commented Apr 19, 2016 at 20:36
Could you provide a coded example where there is more than one element with the gcf_crud class? — Barry Michael Doyle
– Barry Michael Doyle, Commented Apr 19, 2016 at 20:36

blex · Accepted Answer · 2016-04-19 20:39:38Z

2

Your defTextDisabled variable only returns the input because of .find('.gcf_crud').

But it seems that you need a reference (variable) to a jQuery object containing all the elements. In order to do that, break down your process in steps:

var defText = '<div class="form-group col-md-12">'
            +   '<h4 id="minimum-setp">{{title}}</h4>'
            +   '<input type="text" class="form-control gcf_crud" id="txtUsuari" value="{{data}}"/>'
            + '</div>',
    $defText = $(defText); // Save the entire thing here
    
// Now, you can disable the input
$defText.find('.gcf_crud').prop('disabled', true);

// And use the whole content
$('body').append($defText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

answered Apr 19, 2016 at 20:39

blex

25.7k6 gold badges49 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seak Over a year ago

I understand perfectly my mistake. Thanks a lot to all. I'm auto-learner and this tricky habbits are difficult to find in tutorials and googleing.

Barry Michael Doyle · Accepted Answer · 2016-04-19 20:32:20Z

1

Add the gcf_crud class to the main div.

edited Apr 19, 2016 at 20:32

answered Apr 19, 2016 at 20:21

Barry Michael Doyle

10.8k33 gold badges98 silver badges162 bronze badges

4 Comments

Seak Over a year ago

same behavior. var defTextDisabled is only the input

Barry Michael Doyle Over a year ago

Sorry, I've changed my answer.

Seak Over a year ago

Your solution would disable also the div and i wanted only the elements with class gcf_crud

Barry Michael Doyle Over a year ago

You're right, my bad I misunderstood the question. Glad you found an answer.

Collectives™ on Stack Overflow

change property disabled in a variable containing html with jquery or js

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related