How to call input ID in jquery or js?-CodePudding

anyone can teach me how to use this kind of id in the jquery or js? i was trying to make a function where in if you click a button this table data input will be enabled

<td><input type="number" disabled name="qty[]" min="0" id="qty_<?php echo $x; ?>"  required onclick="getTotal(<?php echo $x; ?>)" onkeyup="getTotal(<?php echo $x; ?>)" value="<?php echo $val['qty'] ?>" autocomplete="off"></td>

i tried to add a new id like this but i realize that we can not have multiple id in one html element anyone can show me how to use this id="qty_" to call this id in jquery? i want to call the id to use it to enable and disable when a button click

i tried this when the button is click

$('*#my_field').prop( "disabled", false );

it works because i add a new id but i know html element supose to have a 1 id so how can i use the id="qty_<?php echo $x; ?>" i tried using it with computation Number($("#qty_" row).val()); it has row so how can i use something like this in js or jquery?

CodePudding user response：

Include in a function you are using.

Vanilla JS

document.getElementById('element-id').disabled = false;

JQuery

//better use prop in JQuery > 1.6

$('#element-id').prop('disabled', false);

$("#element-id").attr("disabled", false);

CodePudding user response：

You don't really need an id if you just need to remove the disable property on it.

You will just need to catch the click event then remove the disabled property on the input. the problem would be that disabled elements don't fire click events when clicked so you will need an invisible span or div that will catch the event on top of the input, like this:

$('input[disabled]').siblings('div.inputOverlay').click(
  (event) => {
    const $input = $(event.target).siblings('input[disabled]');
    console.log($input);
    $input.attr('disabled', false);
    $input.focus();
    $(event.target).hide();
  }
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
  <td style="display:relative;">
<div style="position:absolute; top:0; left:0; right:0; bottom:0;" ></div>
<input type="number" disabled  name="qty[]" min="0" id="qty_2"  required value="123" autocomplete="off">
</td></tr>
</table>