How to enable specific input with button click

Question

I have list of 10 input with disabled property like this

<form method="post" action="" autocomplete="off" class="rule-form">
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="10" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="1" data-poin="10">Edit</button>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="20" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="2" data-poin="20">Edit</button>
        </div>
    </div>
</form>

When I click Edit button, I want to remove disabled property and alert class for input which is same row with that button. I have tried like this

$('form.rule-form').find('button.rule-btn').each(function(){
    $(this).click(function(){

        $(this).text('Submit');

        $('form.rule-form').find('input[name="rule"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-info');
        });

        $('form.rule-form').find('input[name="point"]').each(function(){
            $(this).prop('disabled', false).toggleClass('alert-success');
        });

        $(this).click(function(){
            $('form.rule-form').submit();
        })
    });
});

but it seems all of input list are enabled after I click Edit button.

score 2 · Accepted Answer · answered Feb 15 '18 at 13:00

The issue is because you need to use DOM traversal to find the input elements relevant to the row of the clicked button. To do that you can use a combination of closest() and find().

Also note that a simpler way to submit the form on the second click of the button would be to change the type to submit in the HTML, then use preventDefault() on the first click to stop the submission. Try this:

$('form.rule-form button.rule-btn').click(function(e) {
  var $btn = $(this);
  if ($btn.text() !== 'Submit') {
    e.preventDefault();
    $btn.text('Submit');
    $btn.closest('.form-row').find('input')
      .prop('disabled', false)
      .removeClass('alert-info alert-success');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" class="rule-form">
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="10" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="1" data-poin="10">Edit</button>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-10">
      <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
    </div>
    <div class="form-group col-md-1">
      <input type="text" name="point" class="form-control alert-success" value="20" disabled>
    </div>
    <div class="form-group col-md-1">
      <button type="submit" class="rule-btn" data-id="2" data-poin="20">Edit</button>
    </div>
  </div>
</form>

Thankyou, it works. What is the different between parent() and closest(), it seem closest is very common to use rather than parent() — ghabriel, Feb 15 '18 at 13:14
The difference is that `parent()` looks for the single parent element, whereas `closest()` looks all the way up the DOM tree to find the selector your provide. You can read more in the documentation: http://api.jquery.com/parent & http://api.jquery.com/closest — Rory McCrossan, Feb 15 '18 at 13:16
how to get it back disabled if I click outside input or somewhere else? Should I make another button to cancel it? — ghabriel, Feb 15 '18 at 16:21
That would be the easiest way. Alternatively you can detect a click outside the button or the inputs and cancel then: https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — Rory McCrossan, Feb 15 '18 at 16:23

score 2 · Answer 2 · edited Feb 15 '18 at 15:06

2

It looks like you can't find your element under $(this), so navigating up the DOM hierarchy will help:

$('button').click(function(){
    $(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
    $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
});

edited Feb 15 '18 at 15:06

Bucket

7,415
9
35
45

answered Feb 15 '18 at 13:09

Abdul Hashik

99
4

jasinth premkumar · Answer 3 · 2018-02-15T13:34:25.150

this find input and enable on clikcing edit button if once edit is clicked button text will be changed into submit on next click it check whether button text is submit or not if it is submit it will submit the form.

$(function() {$('.rule-btn').click(function(){
if(alreadyClicked)
  {
    
  $(this).attr('type','submit');
   return;
  }
$(this).parent().parent().find('input[name="rule"]').prop('disabled', false).toggleClass('alert-info');
   $(this).parent().parent().find('input[name="point"]').prop('disabled', false).toggleClass('alert-success');
   $(this).attr('id','submit');
   $(this).text("submit");
   alreadyClicked = true;
   console.log($(this).attr('class'));
});
var alreadyClicked = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" autocomplete="off" class="rule-form">
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="First Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="10" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="1" data-poin="10">Edit</button>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-10">
            <input type="text" name="rule" class="form-control alert-info" value="Second Rule" disabled>
        </div>
        <div class="form-group col-md-1">
            <input type="text" name="point" class="form-control alert-success" value="20" disabled>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="rule-btn" data-id="2" data-poin="20">Edit</button>
        </div>
    </div>
</form>

score 0 · Answer 4 · edited Feb 15 '18 at 13:17

0

Try by finding the siblings and change attribute value.

$(this).parent().siblings().find(".form-group").removeAttr("disabled");

Same way you can remove class also.

edited Feb 15 '18 at 13:17

Rory McCrossan

331,213
40
305
339

answered Feb 15 '18 at 13:00

Alekhya

147
11

score 0 · Answer 5 · answered Feb 15 '18 at 13:01

$('.rule-btn').click(function(){
   $('input[name="rule"]', $(this).closest('.form-row')).each(function(){
     $(this).prop('disabled', false).toggleClass('alert-info');
 })
 $('input[name="point"]', $(this).closest('.form-row')).each(function(){
   $(this).prop('disabled', false).toggleClass('alert-success');
  })
})

You can do simply like pass parent and find element and you can do whatever with element

How to enable specific input with button click

5 Answers5