Link to home
Start Free TrialLog in
Avatar of Eduardo Fuerte
Eduardo FuerteFlag for Brazil

asked on

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
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

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 :)
Avatar of Eduardo Fuerte

ASKER

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:  
User generated image
The view mode - "view" modal: (with "_v" sufix in jQuery)
User generated image
Could you check?
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.
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

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

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

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

    $("#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...
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)
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

And does it work now?
ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
No. I have just used an outdated version of your script, without worrying about anything but the current issue :)
Cleared.

Thank you for so elaborated reply!