CODEWITHSUNDEEP
javascriptphpjqueryhtmltwitter-bootstrap
Abid
Abid

Reputation: 129

how to disable link after clicking once with jquery

How can i disable a link after clicking on it once with jquery . on clicking the link its adding an input field inside a div with unique id. I am getting the values in a dropdown from a variable.

  $(document).ready(function() {
        var count = 1;
        $(".block").on('click', function(){
            $("#textInput").append(
                '<div class="cgparent" id="input'+count+'">' +
                '<div class="col-md-8">' +
                '<input class="form-control"  type="text">' +
                '</div>' +
                '<div class="col-md-4">' +
                '<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
                '<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</div>' + '<br><br>' +
                '</div>'
            ).show();
            count++;
        });
    });



 <?php if ($table_name == "questions") {?>
                <div  class="dropdown" >
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
                        <span class="caret"></span>
                    </button>
                    <ul  class="dropdown-menu">
                        <?php
                        $question_fields = $this->db->list_fields('questions');
                        for ($i=0; $i<count($question_fields); $i++){?>
                            <li><a class="block" ><?php echo $question_fields[$i]?></li>
                        <?php } ?>
                    </ul>
                </div>
            <?php  } ?>

Upvotes: 3

Views: 2066

Answers (3)

Peter
Peter

Reputation: 9123

I would do it by setting a counter. If the counter is higher than zero, that means the link has been clicked.

<a class="once-only" href="/do-stuff">Click me</a>

<script type="text/javascript">
$(document).ready(function ($) {
    var clicked = 0;
    $(document).on('click', '.once-only', function () {
        if (clicked != 0) {
            return false;
        }
        var clicked = clicked + 1;
    });
});
</script>

Update

The comments brought this solution:

<script type="text/javascript">
$(document).ready(function ($) {
    $(document).on('click', '.once-only', function () {
        ​$(this).contents().unwrap();​​
    });
});
</script>

The above will simply remove the anchor.

Upvotes: 0

Mirko Lugano
Mirko Lugano

Reputation: 985

If adding some CSS is ok for you this is the simplest I had found:

Javascript:

$(document).on('click', '#buttonSelector', function () {
    $(this).addClass('disabled');
});

CSS: 

.disabled {
    /* if you also want it to fade a bit:  
       opacity: 0.5
    */
    pointer-events: none;
    cursor: default;
}

Upvotes: 3

Bart Bergmans
Bart Bergmans

Reputation: 4121

Using the following code will set a variable true once the link is clicked. After the link is clicked again it will ignore the click.

$(document).ready(function() {
        var count = 1;
        var clicked = false;
        $(".block").on('click', function(e){
            if(clicked) {
                e.preventDefault();
            }
            clicked = true;
            $("#textInput").append(
                '<div class="cgparent" id="input'+count+'">' +
                '<div class="col-md-8">' +
                '<input class="form-control"  type="text">' +
                '</div>' +
                '<div class="col-md-4">' +
                '<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
                '<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</div>' + '<br><br>' +
                '</div>'
            ).show();
            count++;
        });
    });

Upvotes: 0

Related Questions