Eduardo Fuerte
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:
Could you suggest something?
Thanks in advance
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();
Could you suggest something?
Thanks in advance
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
The edition mode - "edit" modal:
The view mode - "view" modal: (with "_v" sufix in jQuery)
Could you check?
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
The edition mode - "edit" modal:
The view mode - "view" modal: (with "_v" sufix in jQuery)
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:
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">×</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>
You could use something like$('#divReembolso .custo').prop("disabled", true);
and$('#divReembolso .custo').prop("disabled", false);
This way only elements with 'custo' class within the modal with id='divReembolso ' will be affected.
ASKER
Hi
Turning back to this question:
Using the 02 modals with 02 id(s)
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:
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">
...
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);
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:
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);
$('#divEdit .custo').prop("disabled", false);
$('#edit .custo').prop("disabled", false);
ASKER
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
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);
});
And the element class?
$("#edit").click(function(){
$('#edit .custo').prop("disabled", false);
});
The modal has not a property "disabled". Maybe you can ise this: $("#edit").click(function(){
$('#edit input').prop("disabled", false);
});
ASKER
$("#edit").click(function(){
$('#edit input').prop("disabled", false);
});
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
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)
ASKER
Marco
I used this event, obtained elsewhere, called when the modal is shown
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();
});
And does it work now?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Marco
Thank you for so elaborated reply.
I applied just this part:
And it's sufficient, running ok.
Since the view modal doesn't has a save button, and because this code:
makes the control values dificultly readeble, I didn't use it.
Just one thing isn't clear yeat:
The jQuery code block:
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?
Thank you for so elaborated reply.
I applied just this part:
$('#edit').on('show.bs.modal', function () {
$('#edit input').prop("disabled", false);
});
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);
// });
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>
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 :)
ASKER
Cleared.
Thank you for so elaborated reply!
Thank you for so elaborated reply!
ASKER
Marco
This question have a similar derivation in:
https://www.experts-exchange.com/questions/28975434/Could-you-point-how-to-enable-a-right-bar-form-control-after-it-had-been-disabled.html
Could you have a look?
This question have a similar derivation in:
https://www.experts-exchange.com/questions/28975434/Could-you-point-how-to-enable-a-right-bar-form-control-after-it-had-been-disabled.html
Could you have a look?
Open in new window
This way you'll disable only elements within the view modal nd you will go :)