Could you point a jQuery code to make a form control enabled after it had been disabled?

Hi Experts

Could you point a jQuery code to make a form control enabled after it had been disabled?

I'm running a form with 02 modals: one for data edition and another just to visualize data.

The control names are the same in the 02 modals - is it a problem?

If I first run the edition modal I can edit certain controls, but if I first use the other for visualization and then for edition the data are no longer editable.

I tryed to use this jQuery code with no success:
                $( ".custo" ).prop( "disabled", false );
                //
                 $(".custo").show();

Open in new window


Could you suggest something?

Thanks in advance
Eduardo FuerteAsked:
Who is Participating?
 
Marco GasiFreelancerCommented:
Do you remember the issue to get the correct serv value to download a file?
I used those two really simple modal to do a test and the single line
$('#edit input').prop("disabled", false);

Open in new window

works fine for both text input I placed in the modals: http://test.webintenerife.com/2modals_selectors.php (you can take a look at the source through developer tools)

So you have something different which prevent the correct code to work, but what is it?

I used the whole modal markups you gave me in the other question (see working code http://test.webintenerife.com/2modals_disabling.php) and I found that you are using some jquery code within the page. In my example  that code starts in line 264:
<script type="text/javascript">
	//Carrega o Dropdown de motivo_reclamação de acordo com a origem selecionada
	$(function () {
		$("#fk_origem_problema").change(function () {
			var serv = $('#fk_origem_problema').val();
			$(".validar.field.select.fk_motivo_reclamacao").empty();
			$.ajax({
      			        url: base_url('reclamacao/get_motivo/' + serv),
				type: 'post',
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				data: serv,
			success: function (data) {
				$(".validar.field.select.fk_motivo_reclamacao").append(data);
			},
			error: function (jqXHR) {
				bootbox.alert(jqXHR.responseText);
                        }
		});
	});
});
</script>

Open in new window

Now, if you put the link to jquery at the bottom of the page, this code produces an error ($ is undefined: you can see it in the console) which prevents all javascript to work, so in my example I put jquery in the head section and the single line to disable/enable controls works perfectly: you have just to adda line to enable/disable select...
0
 
Marco GasiFreelancerCommented:
Hi Eduardo. The code you are using is correct. You can try this: give to your modals 2 ids the first one id="edit" and the second id="view" then, when you disable elements do this
 $( "#view .custo" ).prop( "disabled", true );

Open in new window

This way you'll disable only elements within the view modal nd you will go :)
0
 
Eduardo FuerteAuthor Commented:
Hi Marco!

I'm still using this aproach you pointed  id="edit" and the second id="view" .

If I 1st open the "edit" modal I can edit the values.

If I 1st open the "view " modal and then the "edit" modal the textboxes are no longer editable - I have to manually reload the form to make possible to edit again.

To complicate a little more the "view" mode must habilitate 02 combos.


The jQuery I use

  $("#divReembolso").hide();  // Edit modal
        $("#divReembolso_v").hide(); // View Modal
        
		//Refering to edit modal
        $("#houve_custo").change(function() {
            var serv = $( "#houve_custo option:selected" ).text();

            if (serv != 'Sim')
            {
                $(".custo").hide();
                $("#divReembolso").hide();
            }
            else
            {
                 $(".custo").show();              
                 $("#divReembolso").show();
            }
        });

        $("#houve_reembolso").change(function() {
            var serv = $( "#houve_reembolso option:selected" ).text();''
            if (serv != 'Sim')
                $(".reembolso").hide();
            else
                $(".reembolso").show();
                
        });
		// End refering edit modal
		
		//Refering view modal
         $("#houve_custo_v").change(function() {
            var serv_v = $( "#houve_custo_v option:selected" ).text();

            if (serv_v != 'Sim')
            {
                $(".custo_v").hide();
                $("#divReembolso_v").hide();
                
            }
            else
            {
                 $(".custo_v").show();
                $("#divReembolso_v").show();
               
            }
        });

        $("#houve_reembolso_v").change(function() {
            var serv = $( "#houve_reembolso_v option:selected" ).text();

            if (serv != 'Sim')
                $(".reembolso_v").hide();
            else
                $(".reembolso_v").show();
        });
		// End refering edit modal

Open in new window


The edition mode - "edit" modal:  
img001
The view mode - "view" modal: (with "_v" sufix in jQuery)
img002
Could you check?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Marco GasiFreelancerCommented:
I think there is a misunderstanding here.
Ok you use 2 ids: #divReembolso for the Edit modal and #divReembolso_v for the View Modal.
But I don't see the code you use to enable/disble form elements. lso I would like to see the markup of the 2 divs.

What I ment is: if you use the modal div in your jQuery selector the action will affect only the correct element.
Let say you have something like this:
<div class="modal fade" id="divReembolso">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <input type="text" class="custo" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

You could use something like
$('#divReembolso .custo').prop("disabled", true);

Open in new window

and
$('#divReembolso .custo').prop("disabled", false);

Open in new window

This way only elements with 'custo' class within the modal with id='divReembolso ' will be affected.
0
 
Eduardo FuerteAuthor Commented:
Hi

Turning back to this question:

Using  the 02 modals with 02 id(s)

1st Modal
 <div id="edit" class="modal fade" tabindex="-1" role="dialog" id="divEdit">

...
2nd Modal
<div id="view" class="modal fade" tabindex="-1" role="dialog" id="divView">
...

Open in new window


Since if the view modal is first called then when edit modal is called its controls are disabled.

My dificulty is in how  jQuery must to be coded in a manner that if  id=id="divEdit"  it always enable all the modal controls.  

I guess by using the code you point:
$('#divReembolso .custo').prop("disabled", false);

Open in new window

0
 
Marco GasiFreelancerCommented:
Yes, but I see in your last comment that you set 2 ids for each modal: for the view modal you have both id="view" and id="divView", for the edit modal you have both id="edit" and id="divEdit".
Use only one div, otherwise jQuery will fail or will have some unexpected and unpredictable beahior.

Anyway, yes use the div of the edit modal you want modify in your selector: following code should work depending on the div you are using for the edit modal:
$('#divReembolso .custo').prop("disabled", false);

Open in new window

$('#divEdit .custo').prop("disabled", false);

Open in new window

$('#edit .custo').prop("disabled", false);

Open in new window

0
 
Eduardo FuerteAuthor Commented:
I correct to have just one id for each modal  (edit/ view)

But when div="edit" is clicked all its controls must to be enabled

I tryed this - doesn't work

        $("#edit").click(function(){
            $('#edit').prop("disabled", false);
       });

Open in new window

0
 
Marco GasiFreelancerCommented:
And the element class?
       $("#edit").click(function(){
            $('#edit .custo').prop("disabled", false);
       });

Open in new window

The modal has not a property "disabled". Maybe you can ise this:
       $("#edit").click(function(){
            $('#edit input').prop("disabled", false);
       });

Open in new window

0
 
Eduardo FuerteAuthor Commented:
    $("#edit").click(function(){
            $('#edit input').prop("disabled", false);
       });

Open in new window

doesn't work for all the elements.

I guess it's necessary to enable the elements one by one...
0
 
Marco GasiFreelancerCommented:
Hi Eduardo, I'm not able to find where you posted the whole code of the modal... Anyway, why you use
$("#edit").click

Open in new window

This would mean that inputs should be enabled clicking on the modal. You should put the enabling code in the click event of the button which shows the modal (or within the code which shows the modal)
0
 
Eduardo FuerteAuthor Commented:
Marco

I used this event, obtained elsewhere, called when the modal is shown

    $('#edit').on('show.bs.modal', function () {   
            $('#edit .custo').prop("disabled", false);
            $('#edit .reembolso').prop("disabled", false);        
            $('#edit .custo').show();
            $('#edit .reembolso').show();
        });

Open in new window

0
 
Marco GasiFreelancerCommented:
And does it work now?
0
 
Eduardo FuerteAuthor Commented:
Hi Marco


Thank you for so elaborated reply.

I applied just this part:

  $('#edit').on('show.bs.modal', function () {
    		$('#edit input').prop("disabled", false);
   });

Open in new window


And it's sufficient, running ok.
Since the view modal doesn't has a save button, and because this code:

  //  	$('#view').on('show.bs.modal', function () {
//    		$('#view input').prop("disabled", true);
//    	});

Open in new window


makes the control values dificultly readeble, I didn't use it.

Just one thing isn't clear yeat:

The jQuery code block:

<script type="text/javascript">
	//Carrega o Dropdown de motivo_reclamação de acordo com a origem selecionada
	$(function () {
		$("#fk_origem_problema").change(function () {
			var serv = $('#fk_origem_problema').val();
			$(".validar.field.select.fk_motivo_reclamacao").empty();
			$.ajax({
      			        url: base_url('reclamacao/get_motivo/' + serv),
				type: 'post',
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				data: serv,
			success: function (data) {
				$(".validar.field.select.fk_motivo_reclamacao").append(data);
			},
			error: function (jqXHR) {
				bootbox.alert(jqXHR.responseText);
                        }
		});
	});
});
</script>

Open in new window


You mentioned was transfered at the bottom of the page, looks in your code at the same place it was before, did I misunderstanding something?
0
 
Marco GasiFreelancerCommented:
No. I have just used an outdated version of your script, without worrying about anything but the current issue :)
0
 
Eduardo FuerteAuthor Commented:
Cleared.

Thank you for so elaborated reply!
0
 
Eduardo FuerteAuthor Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.